<!DOCTYPE HTML>
<html class="no-js js no-flexbox canvas canvastext hashchange no-history draganddrop rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow no-opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransitions fontface generatedcontent video audio applicationcache" lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><style>article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}</style>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta name="msapplication-TileImage" content="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/smashing-windows-icon-144-144.png">
    <meta name="msapplication-TileColor" content="#e63b2c">
    <title>How To Use CSS3 Pseudo-Classes | Smashing Coding</title>
    <link rel="alternate" type="application/atom+xml" title="News-Feed" href="http://rss1.smashingmagazine.com/feed/">
    <link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Coding Feed" href="http://rss1.smashingmagazine.com/feed/?f=coding-std">    <link rel="pingback" href="http://coding.smashingmagazine.com/xmlrpc.php">
    <link rel="apple-touch-icon-precomposed" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-144x144-precomposed.png">
    <link rel="shortcut icon" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/favicon.ico">
    
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.2 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria. Before we look at these new CSS3 pseudo-classes, let’s briefly delve into the dusty past of the Web and chart the journey of these often misunderstood selectors.">
<link rel="canonical" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">
<!-- / Yoast WordPress SEO plugin. -->

<link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Feed" href="http://rss1.smashingmagazine.com/feed/">


<link rel="stylesheet" id="prismjs-css" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/default.css" type="text/css" media="all">
<link rel="stylesheet" id="BotBlockerCSS-css" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/styles.css" type="text/css" media="all">
<link rel="stylesheet" id="smash-commentratings-css" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/commentratings-css.css" type="text/css" media="all">
<link rel="stylesheet" id="fontdeck-css" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/12777.css" type="text/css" media="screen, print">
<link rel="stylesheet" id="main-css" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/main.css" type="text/css" media="all">
<script type="text/javascript" async="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/1125.js"></script><script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/jquery.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/site-config.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/thirdparty.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/widgets.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/onload.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/comment-reply.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/footnotes.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/contact.js"></script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/commentratings-min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpAjax = {"noPerm":"You do not have permission to do that.","broken":"An unidentified error has occurred."};
/* ]]> */
</script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/wp-ajax-response.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/loadingAnimation.gif","closeImage":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/tb-close.png"};
/* ]]> */
</script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/thickbox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpajaxeditcomments = {"AEC_PluginUrl":"http:\/\/coding.smashingmagazine.com\/wp-content\/plugins\/smash-edit-comments","AEC_CanScroll":"0","AEC_Minutes":"minutes","AEC_Minute":"minute","AEC_And":"and","AEC_Seconds":"seconds","AEC_Second":"second","AEC_Moderation":"Mark for Moderation?","AEC_Approve":"Approve Comment?","AEC_Spam":"Mark as Spam?","AEC_Delete":"Delete this comment?","AEC_Anon":"Anonymous","AEC_Loading":"Loading...","AEC_Ready":"Ready","AEC_Sending":"Sending...","AEC_Sent":"Message Sent","AEC_LoadSuccessful":"Comment Loaded Successfully","AEC_Saving":"Saving...","AEC_Saved":"Comment Successfully Saved","AEC_Delink":"De-link Successful"};
/* ]]> */
</script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/wp-ajax-edit-comments.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://coding.smashingmagazine.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://coding.smashingmagazine.com/wp-includes/wlwmanifest.xml"> 

<link rel="shortlink" href="http://coding.smashingmagazine.com/?p=93190">
<link rel="stylesheet" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/edit-comments.css" type="text/css" media="screen"><!-- Ajax Edit Comments -->
<!--[if IE]>
<style>
  .clearfix {display: inline-block;}
  /* Hides from IE-mac \*/
  * html .clearfix {height: 1%;}
  .clearfix {display: block;}
  /* End hide from IE-mac */
</style>
<![endif]-->
<link rel="stylesheet" href="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/thickbox.css" type="text/css" media="all">    <!--[if IE 8]>
    <link rel="stylesheet" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/stylesheets/ie8.css" />
    <![endif]-->
    <script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in_005.php" async="" type="text/javascript"></script><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in_004.php" async="" type="text/javascript"></script><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in.php" async="" type="text/javascript"></script><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in_002.php" async="" type="text/javascript"></script><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in_003.php" async="" type="text/javascript"></script><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/in_006.php" async="" type="text/javascript"></script></head><body data-twttr-rendered="true" class="single single-post postid-93190 single-format-standard coding-section">
	<div style="position: absolute; top: 0pt; right: 0pt;">
	    <iframe id="a8f21723" name="a8f21723" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/afr.htm" width="1" frameborder="0" height="1" scrolling="no">&lt;a
 
href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a089b367&amp;amp;cb=427876437'
 target='_blank'&gt;&lt;img 
src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=85&amp;amp;cb=427876437&amp;amp;n=a089b367'
 border='0' alt='' /&gt;&lt;/a&gt;</iframe>

	    <a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a0c26dc5&amp;cb=427876437'" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/undefined" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/avw.gif" alt="" border="0"></a>

	    <script type="text/javascript"><!--//<![CDATA[
                var m3_u = (location.protocol=='https:'?'https://auslieferung.commindo-media-ressourcen.de/www/delivery/ajs.php':'http://auslieferung.commindo-media-ressourcen.de/www/delivery/ajs.php');
                var m3_r = Math.floor(Math.random()*99999999999);
                if (!document.MAX_used) document.MAX_used = ',';
                document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
                document.write ("?zoneid=87");
                document.write ('&amp;cb=' + m3_r);
                if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
                document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
                document.write ("&amp;loc=" + escape(window.location));
                if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
                if (document.context) document.write ("&context=" + escape(document.context));
                if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
                document.write ("'><\/scr"+"ipt>");
    //]]>--></script><script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ajs.php"></script><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai.gif" alt="" title="" border="0"><div id="beacon_eb7ce6639d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_017.gif" alt="" style="width: 0px; height: 0px;"></div>
<noscript><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=aeb3aeef&amp;cb=427876437' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=87&amp;cb=427876437&amp;n=aeb3aeef' border='0' alt='' /></a></noscript>
        </div>	

	<a id="top"></a>
        <nav class="toplevel clearfix">
            <div class="mini">
                <a style="border: medium none;" href="http://www.smashingmagazine.com/"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a>
                <select name="network" id="networkselection">
                    <option value="network" selected="selected">- select -</option>
                    <option value="http://www.smashingmagazine.com/books/">Books</option>
                    <option value="http://www.smashingmagazine.com/ebooks/">Library</option>
                    <option value="http://jobs.smashingmagazine.com/">Job Board</option>
                    <option value="https://shop.smashingmagazine.com/">Shop</option>
                </select>
            </div>
            <ul class="network clearfix">			
                <li class="current"><a style="border: medium none;" href="http://www.smashingmagazine.com/"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></li>
                <li><a href="http://www.smashingmagazine.com/books/">Books</a></li>
                <li><a href="http://www.smashingmagazine.com/ebooks/">Library</a><a style="border: medium none;" href="http://www.smashingmagazine.com/ebooks/" id="naviebookslink"><img id="littleebooksimage" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/navilittlebook.png" alt="Smashing Library"></a></li>
                <li><a href="http://jobs.smashingmagazine.com/">Job Board</a></li>
                <li><a href="https://shop.smashingmagazine.com/">Shop</a></li>
            </ul>
            <ul class="channels">
                <li class="rss"><a href="http://rss1.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (1100K)">RSS</a></li>
                <li class="facebook"><a href="http://www.facebook.com/smashmag" title="Join our Facebook page! (99k)">Facebook</a></li>
                <li class="twitter"><a href="http://twitter.com/smashingmag" title="Follow us on Twitter! (612K)">Twitter</a></li>
                <li class="newsletter"><a href="http://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (107K)">Newsletter</a></li>
            </ul>
        </nav>

<div id="container">
    <div class="fluid clearfix">
        <div class="grid clearfix">
            <div class="mini-search wp-search-form">			
                <form id="search" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
                    <input name="q" placeholder="e.g. JavaScript" type="text">
                    <button class="search_submit" type="submit"><span class="first-type">Search</span><span class="last-type">Go!</span></button>
                    <input name="cx" value="partner-pub-6779860845561969:5884617103" type="hidden">
                    <input name="cof" value="FORID:10" type="hidden">
                    <input name="ie" value="UTF-8" type="hidden">
                </form>
            </div>
            <div class="col sidebar">
                <nav class="sections">
                <div class="mini">
                    <select name="sections" id="subsection-select">
                        <option value="network">- select -</option>
                        <optgroup label="Smashing Categories">
                            <option value="http://www.smashingmagazine.com/books/">Books</option>
                            <option value="http://www.smashingmagazine.com/ebooks/">eBooks</option>
                            <option value="http://jobs.smashingmagazine.com/">Job Board</option>
                            <option value="https://shop.smashingmagazine.com/">Shop</option>								
                        </optgroup>
                        <optgroup label="Smashing Sections">
                            <option selected="selected" value="http://coding.smashingmagazine.com/">Coding</option>
                            <option value="http://www.smashingmagazine.com/category/design/">Design</option>
                            <option value="http://mobile.smashingmagazine.com">Mobile</option>
                            <option value="http://www.smashingmagazine.com/category/graphics/">Graphics</option>
                            <option value="http://uxdesign.smashingmagazine.com">UX Design</option>
                            <option value="http://wp.smashingmagazine.com">WordPress</option>
                        </optgroup>
                    </select>
                </div>
                <ul class="clearfix">
                    <li class="coding current">
                        <a href="http://coding.smashingmagazine.com/">Coding</a>
                        <ul>
                            <li><a href="http://coding.smashingmagazine.com/tag/css/">CSS</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/html/">HTML</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/javascript/">JavaScript</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/techniques/">Techniques</a></li>
                        </ul>
                    </li>
                    <li class="design">
                        <a href="http://www.smashingmagazine.com/category/design/">Design</a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/web-design/">Web Design</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/typography/">Typography</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/inspiration/">Inspiration</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/business/">Business</a></li>
                        </ul>
                    </li>
                    <li class="community">
                        <a href="http://mobile.smashingmagazine.com/">Mobile</a>
                        <ul>
                            <li><a href="http://mobile.smashingmagazine.com/tag/responsive-design/">Responsive</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/ios/">iPhone &amp; iPad</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/android/">Android</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/design-patterns/">Design Patterns</a></li>
                        </ul>
                    </li>
                    <li class="graphics">
                        <a href="http://www.smashingmagazine.com/category/graphics/">Graphics</a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/photoshop/">Photoshop</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/illustrator/">Illustrator</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/wallpapers/">Wallpapers</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
                        </ul>
                    </li>
                    <li class="ux">
                        <a href="http://uxdesign.smashingmagazine.com/">UX Design</a>
                        <ul>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/usability/">Usability</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/ui/">UI Design</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/e-commerce/">E-Commerce</a></li>
                        </ul>
                    </li>
                    <li class="wordpress">
                        <a href="http://wp.smashingmagazine.com/" class="clearfix"><span class="short">WP</span><span class="long"><span>Word</span><span>Press</span></span></a>
                        <ul>
                            <li><a href="http://wp.smashingmagazine.com/tag/essentials/">Essentials</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/techniques/">Techniques</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/plugins/">Plugins</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/themes/">Themes</a></li>
                        </ul>
                    </li>
                </ul>
                <br class="nasty">
            </nav>
        </div><!-- .col.sidebar -->
        <div class="col main single">
    <article class="post-93190 post type-post status-publish format-standard hentry category-coding category-css-popular tag-css tag-css3 tag-essentials post">
                    <h2><a href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/" rel="bookmark" title="Read 'How To Use CSS3 Pseudo-Classes'">How To Use CSS3 Pseudo-Classes</a></h2>
                <ul class="postmetadata clearfix">
            <li class="author">By <a rel="author" href="http://coding.smashingmagazine.com/author/richard-shepherd/?rel=author" title="Posts by Richard Shepherd">Richard Shepherd</a></li>
            <li id="logoedtarget" class="inline"><div id="logoed"></div></li>            <li class="date">March 30th, 2011</li>
            <li class="tags"><a href="http://coding.smashingmagazine.com/tag/css/">CSS</a>, <a href="http://coding.smashingmagazine.com/tag/css3/">CSS3</a>, <a href="http://coding.smashingmagazine.com/tag/essentials/">Essentials</a></li>
            <li class="comments"><a href="#comments" title="Comment on How To Use CSS3 Pseudo-Classes">63 Comments</a></li>
                    </ul>
                <div class="ad ed">
            <span class="declare">Advertisement</span>
            <div id="mediumrectangletarget"><div id="mediumrectangle"><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5931__zoneid=22__OXLCA=1__cb=5e0aa9cb4f__oadest=http%3A%2F%2Fwww.lightcms.com%2Ffor-designers%3Futm_source%3DSmashing%252B%28Content%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_011.png" alt="" title="" border="0"></a><div id="beacon_5e0aa9cb4f" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_005.gif" alt="" style="width: 0px; height: 0px;"></div>
</div></div>
        </div>
                
            
                    <p>CSS3 is a wonderful thing, but it’s easy to be 
bamboozled by the transforms and animations (many of which are 
vendor-specific) and forget about the nuts-and-bolts selectors that have
 also been added to the specification. A number of powerful new 
pseudo-selectors (16 are listed in the <a href="http://www.w3.org/TR/css3-selectors/">latest W3C spec</a><sup class="print_only">1</sup>) enable us to select elements based on a range of new criteria.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/css3.jpg"><img class="aligncenter size-full wp-image-93197" title="css3" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/css3.jpg" alt="Screenshot"></a></p>
<p>Before we look at these new CSS3 pseudo-classes, let’s briefly delve 
into the dusty past of the Web and chart the journey of these often 
misunderstood selectors.</p>
<div id="textadtarget"></div><h3>A Brief History Of Pseudo-Classes</h3>
<p>When the <a href="http://www.w3.org/TR/CSS1/">CSS1</a><sup class="print_only">2</sup>
 spec was completed back in 1996, a few pseudo-selectors were included, 
many of which you probably use almost every day. For example:</p>
<ul>
<li><code>:link</code></li>
<li><code>:visited</code></li>
<li><code>:hover</code></li>
<li><code>:active</code></li>
</ul>
<p>Each of these states can be applied to an element, usually <code>&lt;a&gt;</code>, after which comes the name of the pseudo-class. It’s amazing to think that these pseudo-classes arrived on the scene before <a href="http://www.w3.org/TR/html401/">HTML4</a><sup class="print_only">3</sup> was published by the W3C a year later in December 1997.</p>
<h4>CSS2 Arrives</h4>
<p>Hot on the heels of CSS1 was <a href="http://www.w3.org/TR/CSS2/">CSS2</a><sup class="print_only">4</sup>,
 whose recommended spec was published just two years later in May 1998. 
Along with exciting things like positioning were new pseudo-classes: <code>:first-child</code> and <code>:lang()</code>.</p>
<p><code>:lang</code><br>
There are a couple of ways to indicate the language of a document, and if you’re using <a href="http://www.w3.org/html/logo/">HTML5</a><sup class="print_only">5</sup>, it’ll likely be by putting <code>&lt;html lang="en"&gt;</code> just after the doc type (specifying your local language, of course). You can now use <code>:lang(en)</code> to style elements on a page, which is useful when the language changes dynamically.</p>
<p><code>:first-child</code><br>
You may have already used <code>:first-child</code> in your documents. 
It is often used to add or remove a top border on the first element in a
 list. Strange, then, that it wasn’t accompanied by <code>:last-child</code>; we had to wait until CSS3 was proposed before it could meet its brother.</p>
<h4>Why Use Pseudo-Classes?</h4>
<p>What makes pseudo-classes so useful is that they <strong>allow you to style content dynamically</strong>. In the <code>&lt;a&gt;</code>
 example above, we are able to describe how links are styled when the 
user interacts with them. As we’ll see, the new pseudo-classes allow us 
to dynamically style content based on its position in the document or 
its state.</p>
<p>Sixteen new pseudo-classes have been introduced as part of the W3C’s <a href="http://www.w3.org/TR/css3-selectors/">CSS Proposed Recommendation</a><sup class="print_only">6</sup>,
 and they are broken down into four groups: structural pseudo-classes, 
pseudo-classes for the states of UI elements, a target pseudo-class and a
 negation pseudo-class.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/w3c.jpg"><img class="size-full wp-image-93198" title="w3c css3 demo" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/w3c.jpg" alt="Screenshot"></a><br>
<em>The W3C is the home of CSS.</em></p>
<p>Let’s now run through the 16 new pseudo-selectors one at a time and 
see how each is used. I’ll use the same notation for naming classes that
 the W3C uses, where <code>E</code> is the element, <code>n</code> is a number and <code>s</code> is a selector.</p>
<h4>Sample Code</h4>
<p>For many of these new selectors, I’ll also refer to some sample code 
so that you can see what effect the CSS has. We’ll take a regular form 
and make it suitable for an iPhone using our new CSS3 pseudo-classes.</p>
<p>Note that we could arguably use ID and class selectors for much of 
this form, but it’s a great opportunity to take our new pseudo-classes 
out for a spin and demonstrate how you might use them in a real-world 
example. Here’s the HTML (which you can see in action <a href="http://richardshepherd.com/smashing/pseudo/?style=0">on my website</a><sup class="print_only">7</sup>):</p>
<pre><code class="language-markup tmp-html">&lt;form&gt;
 &lt;hgroup&gt;
 &lt;h1&gt;Awesome Widgets&lt;/h1&gt;
 &lt;h2&gt;All the cool kids have got one :)&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;fieldset id="email"&gt;
 &lt;legend&gt;Where do we send your receipt?&lt;/legend&gt;
 &lt;label for="email"&gt;Email Address&lt;/label&gt;
 &lt;input type="email" name="email" placeholder="Email Address" /&gt;
 &lt;/fieldset&gt;

 &lt;fieldset id="details"&gt;
 &lt;legend&gt;Personal Details&lt;/legend&gt;
 &lt;select name="title" id="field_title"&gt;
  &lt;option value="" selected="selected"&gt;Title&lt;/option&gt;
  &lt;option value="Mr"&gt;Mr&lt;/option&gt;
  &lt;option value="Mrs"&gt;Mrs&lt;/option&gt;
  &lt;option value="Miss"&gt;Miss&lt;/option&gt;
 &lt;/select&gt;

 &lt;label for="firstname"&gt;First Name&lt;/label&gt;
 &lt;input name="firstname" placeholder="First Name" /&gt;

 &lt;label for="initial"&gt;Initial&lt;/label&gt;
 &lt;input name="initial" placeholder="Initial" size="3" /&gt;

 &lt;label for="surname"&gt;Surname&lt;/label&gt;
 &lt;input name="surname" placeholder="Surname" /&gt;
 &lt;/fieldset&gt;

 &lt;fieldset id="payment"&gt;
 &lt;legend&gt;Payment Details&lt;/legend&gt;

 &lt;label for="cardname"&gt;Name on card&lt;/label&gt;
 &lt;input name="cardname" placeholder="Name on card" /&gt;

 &lt;label for"cardnumber"&gt;Card number&lt;/label&gt;
 &lt;input name="cardnumber" placeholder="Card number" /&gt;

 &lt;select name="cardType" id="field_cardType"&gt;
  &lt;option value="" selected="selected"&gt;Select Card Type&lt;/option&gt;
  &lt;option value="1"&gt;Visa&lt;/option&gt;
  &lt;option value="2"&gt;American Express&lt;/option&gt;
  &lt;option value="3"&gt;MasterCard&lt;/option&gt;
 &lt;/select&gt;

 &lt;label for="cardExpiryMonth"&gt;Expiry Date&lt;/label&gt;
 &lt;select id="field_cardExpiryMonth" name="cardExpiryMonth"&gt;
  &lt;option selected="selected" value="mm"&gt;MM&lt;/option&gt;
   &lt;option value="01"&gt;01&lt;/option&gt;
   &lt;option value="02"&gt;02&lt;/option&gt;
   &lt;option value="03"&gt;03&lt;/option&gt;
   &lt;option value="04"&gt;04&lt;/option&gt;
   &lt;option value="05"&gt;05&lt;/option&gt;
   &lt;option value="06"&gt;06&lt;/option&gt;
   &lt;option value="07"&gt;07&lt;/option&gt;
   &lt;option value="08"&gt;08&lt;/option&gt;
   &lt;option value="09"&gt;09&lt;/option&gt;
   &lt;option value="10"&gt;10&lt;/option&gt;
   &lt;option value="11"&gt;11&lt;/option&gt;
   &lt;option value="12"&gt;12&lt;/option&gt;
 &lt;/select&gt; /
 &lt;select id="field_cardExpiryYear" name="cardExpiryYear"&gt;
   &lt;option value="yyyy"&gt;YYYY&lt;/option&gt;
    &lt;option value="2011"&gt;11&lt;/option&gt;
    &lt;option value="2012"&gt;12&lt;/option&gt;
    &lt;option value="2013"&gt;13&lt;/option&gt;
    &lt;option value="2014"&gt;14&lt;/option&gt;
    &lt;option value="2015"&gt;15&lt;/option&gt;
    &lt;option value="2016"&gt;16&lt;/option&gt;
    &lt;option value="2017"&gt;17&lt;/option&gt;
    &lt;option value="2018"&gt;18&lt;/option&gt;
    &lt;option value="2019"&gt;19&lt;/option&gt;
 &lt;/select&gt;

 &lt;label for"securitycode"&gt;Security code&lt;/label&gt;
 &lt;input name="securitycode" type="number" placeholder="Security code" size="3" /&gt;

 &lt;p&gt;Would you like Insurance?&lt;/p&gt;
 &lt;input type="radio" name="Insurance" id="insuranceYes" /&gt;
  &lt;label for="insuranceYes"&gt;Yes Please!&lt;/label&gt;
 &lt;input type="radio" name="Insurance" id="insuranceNo" /&gt;
  &lt;label for="insuranceNo"&gt;No thanks&lt;/label&gt;

 &lt;/fieldset&gt;

 &lt;fieldset id="submit"&gt;
 &lt;button type="submit" name="Submit" disabled&gt;Here I come!&lt;/button&gt;
 &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/before-after.jpg"><img class="size-full wp-image-94122" title="before-after" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/before-after.jpg" alt="Screenshot"></a><br>
<em>Our form, before and after.</em></p>
<h3>1. Structural Pseudo-Classes</h3>
<p>According to the W3C, structural pseudo-classes do the following:</p>
<blockquote>
<p>… permit selection based on extra information that lies in the 
document tree but cannot be represented by other simple selectors or 
combinators.</p>
</blockquote>
<p>What this means is that we have selectors that have been 
turbo-charged to dynamically select content based on its position in the
 document. So let’s start at the beginning of the document, with <code>:root</code>.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/selectors-level-screenshot.jpg"><img class="size-full wp-image-93200" title="selectors-level3" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/selectors-level-screenshot.jpg" alt="Screenshot"></a><br>
<em>Level 3 selectors on the W3C website.</em></p>
<h4>E:root</h4>
<p>The <code>:root</code> pseudo-class selects the root element on the page. Ninety-nine times out of a hundred, this will be the <code>&lt;html&gt;</code> element. For example:</p>
<pre><code class="language-css">:root { background-color: #fcfcfc; }</code></pre>
<p>It’s worth noting that you could style the <code>&lt;html&gt;</code> element instead, which is perhaps a little more descriptive:</p>
<pre><code class="language-css">html { background-color: #fcfcfc; }</code></pre>
<p><strong>iPhone Form Example</strong><br>
Let’s move over to our sample code and give the document some basic text and background styles:</p>
<pre><code class="language-css">:root {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
background: url(…/images/background.png) no-repeat #282826; }</code></pre>
<h4>E:nth-child(n)</h4>
<p>The <code>:nth-child()</code> selector might require a bit of experimentation to fully understand. The easiest implementation is to use the keywords <code>odd</code> or <code>even</code>, which are useful when displaying data that consists of rows or columns. For example, we could use the following:</p>
<pre><code class="language-css">ul li:nth-child(odd) {
background-color: #666;
color: #fff; }</code></pre>
<p>This would highlight every other row in an unordered list. You might 
find this technique extremely handy when using tables. For example:</p>
<pre><code class="language-css">table tr:nth-child(even) { … }</code></pre>
<p>The <code>:nth-child</code> selector can be much more specific and flexible, though. You could select only the third element from a list, like so:</p>
<pre><code class="language-css">li:nth-child(3) { … }</code></pre>
<p>Note that <code>n</code> does not start at zero, as it might in an array. The first element is <code>:nth-child(1)</code>, the second is <code>:nth-child(2)</code> and so on.</p>
<p>We can also use some simple algebra to make things even more exciting. Consider the following:</p>
<pre><code class="language-css">li:nth-child(2n) { … }</code></pre>
<p>Whenever we use <code>n</code> in this way, it stands for all 
positive integers (until the document runs out of elements to select!). 
In this instance, it would select the following list items:</p>
<ul>
<li>Nothing (2 × 0)</li>
<li>2nd element (2 × 1)</li>
<li>4th element (2 × 2)</li>
<li>6th element (2 × 3)</li>
<li>8th element (2 × 4)</li>
<li>etc.</li>
</ul>
<p>This actually gives us the same thing as <code>nth-child(even)</code>. So, let’s mix things up a bit:</p>
<pre><code class="language-css">li:nth-child(5n) { … }</code></pre>
<p>This gives us:</p>
<ul>
<li>Nothing (5 × 0)</li>
<li>5th element (5 × 1)</li>
<li>10th element (5 × 2)</li>
<li>15th element (5 × 3)</li>
<li>20th element (5 × 4)</li>
<li>etc.</li>
</ul>
<p>Perhaps this would be useful for long lists or tables, perhaps not. We can also add and subtract numbers in this equation:</p>
<pre><code class="language-css">li:nth-child(4n + 1) { … }</code></pre>
<p>This gives us:</p>
<ul>
<li>1st element ((4 × 0) + 1)</li>
<li>5th element ((4 × 1) + 1)</li>
<li>9th element ((4 × 2) + 1)</li>
<li>13th element ((4 × 3) + 1)</li>
<li>17th element ((4 × 4) + 1)</li>
<li>etc.</li>
</ul>
<p><a href="http://reference.sitepoint.com/css/understandingnthchildexpressions">SitePoint points out</a><sup class="print_only">8</sup> an interesting quirk here. If you set <code>n</code> as negative, you’ll be able to select the first x number of items like so:</p>
<pre><code class="language-css">li:nth-child(-n + x) { … }</code></pre>
<p>Let’s say you want to select the first five items in a list. Here’s the CSS:</p>
<pre><code class="language-css">li:nth-child(-n + 5) { … }</code></pre>
<p>This gives us:</p>
<ul>
<li>5th element (-0 + 5)</li>
<li>4th element (-1 + 5)</li>
<li>3rd element (-2 + 5)</li>
<li>2nd element (-3 + 5)</li>
<li>1st element (-4 + 5)</li>
<li>Nothing (-5 + 5)</li>
<li>Nothing (-6 + 5)</li>
<li>etc.</li>
</ul>
<p>If you’re listing data in order of popularity, then highlighting, say, the top 10 entries might be useful.</p>
<p><a href="http://webdesignandsuch.com/add-zebra-striping-to-a-table-with-css3/">WebDesign &amp; Such</a><sup class="print_only">9</sup> has created a <a href="http://webdesignandsuch.com/posts/zebra-striping/index.html">demo of zebra striping</a><sup class="print_only">10</sup>, which is a perfect example of how you might use <code>nth-child</code> in practice.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/Zebra-Striping-a-Table-with-CSS3.png"><img class="size-full wp-image-94736" title="Zebra Striping a Table with CSS3" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/Zebra-Striping-a-Table-with-CSS3.png" alt="Screenshot"></a><br>
<em>Zebra striping a table with CSS3.</em></p>
<p>If none of your tables need styling, then you could do what <a href="http://webvisionaryawards.com/">Webvisionary Awards</a><sup class="print_only">11</sup> has done and use <code>:nth-child</code> to style alternating sections of its website. Here’s the CSS:</p>
<pre><code class="language-css">section &gt; section:nth-child(even) {
background:rgba(255,255,255,.1)
url("../images/hr-damaged2.png") 0 bottom no-repeat;
}</code></pre>
<p>The effect is subtle on the website, but it adds a layer of detail that would be missed in older browsers.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/WVA-2011.png"><img class="size-full wp-image-94735" title="Webvisionary Awards 2011" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/WVA-2011.png" alt="Screenshot"></a><br>
<em>The :nth-child selectors in action on Webvisionary Awards.</em></p>
<p><strong>iPhone Form Example</strong><br>
We could use <code>:nth-child</code> in a few places in our iPhone form 
example, but let’s focus on one. We want to hide the labels for the 
first three fieldsets from view and use the placeholder text instead. 
Here’s the CSS:</p>
<pre><code class="language-css">form:nth-child(-n+3) label { display: none; }</code></pre>
<p>Here, we’re looking for the first three children of the <code>&lt;form&gt;</code> element (which are all fieldsets in our code) and then selecting the label. We then hide these labels with <code>display: none;</code>.</p>
<h4>E:nth-last-child(n)</h4>
<p>Not content with confusing us all with the <code>:nth-child()</code> pseudo-class, the clever folks over at the W3C have also given us <code>:nth-last-child(n)</code>. It operates much like <code>:nth-child()</code> except in reverse, counting from the last item in the selection.</p>
<pre><code class="language-css">li:nth-last-child(1) { … }</code></pre>
<p>The above will select the last element in a list, whereas the following will select the penultimate element:</p>
<pre><code class="language-css">li:nth-last-child(2) { … }</code></pre>
<p>Of course, you could create other rules, like this one:</p>
<pre><code class="language-css">li:nth-last-child(2n+1) { … }</code></pre>
<p>But you would more likely want to use the following to select the 
last five elements of a list (based on the logic discussed above):</p>
<pre><code class="language-css">li:nth-last-child(-n+5) { … }</code></pre>
<p>If this still doesn’t make much sense, <a href="http://leaverou.me/">Lea Verou</a><sup class="print_only">12</sup> has created a useful <a href="http://leaverou.me/demos/nth.html">CSS3 structural pseudo-class selector tester</a><sup class="print_only">13</sup>, which is definitely worth checking out.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/CSS3-structural-pseudo-class-selector-tester.png"><img title="CSS3 structural pseudo-class selector tester" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/CSS3-structural-pseudo-class-selector-tester.png" alt="Screenshot"></a><br>
<em>CSS3 structural pseudo-class selector tester.</em></p>
<p><strong>iPhone Form Example</strong><br>
We can use <code>:nth-last-child</code> in our example to add rounded 
corners to our input for the “Card number.” Here’s our CSS, which is 
overly specific but gives you an idea of how we can chain 
pseudo-selectors together:</p>
<pre><code class="language-css">fieldset:nth-last-child(2) input:nth-last-of-type(3) {
border-radius: 10px; }</code></pre>
<p>We first grab the penultimate fieldset and select the input that is 
third from last (in this case, our “Card number” input). We then add a <code>border-radius</code>.</p>
<h4>:nth-of-type(n)</h4>
<p>Now we’ll get even more specific and apply styles only to particular <em>types</em> of element. For example, let’s say you wanted to style the first paragraph in an article with a larger font. Here’s the CSS:</p>
<pre><code class="language-css">article p:nth-of-type(1) { font-size: 1.5em; }</code></pre>
<p>Perhaps you want to align every other image in an article to the 
right, and the others to the left. We can use keywords to control this:</p>
<pre><code class="language-css">article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }</code></pre>
<p>As with <code>:nth-child()</code> and <code>:nth-last-child()</code>, you can use algebraic expressions:</p>
<pre><code class="language-css">article p:nth-of-type(2n+2) { … }
article p:nth-of-type(-n+1) { … }</code></pre>
<p>It’s worth remembering that if you need to get this specific about 
targeting elements, then using descriptive class names instead might be 
more useful.</p>
<p>Simon Foster has created a <a href="http://www.fortherecord.simonfosterdesign.com/">beautiful infographic about his 45 RPM record collection</a><sup class="print_only">14</sup>, and he uses <code>:nth-of-type</code> to style some of the data. Here’s a snippet from the CSS, which assigns a different background to each genre type:</p>
<pre><code class="language-css">ul#genre li:nth-of-type(1) {
  width:32.9%;
	background:url(images/orangenoise.jpg);
}
ul#genre li:nth-of-type(2) {
  width:15.2%;
	background:url(images/bluenoise.jpg);
}
ul#genre li:nth-of-type(3) {
  width:13.1%;
	background:url(images/greennoise.jpg);
}</code></pre>
<p>And here’s what it looks like on his website:</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/For-The-Record.png"><img class="size-full wp-image-94747" title="For The Record" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/For-The-Record.png" alt="Screenshot"></a><br>
<em>The :nth-of-type selectors on “For the Record.”</em></p>
<p><strong>iPhone Form Example</strong><br>
Let’s say we want every second input element to have rounded corners on the bottom. We can achieve this with CSS:</p>
<pre><code class="language-css">input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }</code></pre>
<p>In our example, we want to apply this only to the fieldset for 
payment, because the fieldset for personal details has three text 
inputs. We’ll also get a bit tricky and make sure that we <em>don’t</em> select any of the radio inputs. Here’s the final CSS:</p>
<pre><code class="language-css">#payment input:nth-of-type(even):not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #999;
margin-bottom: 10px; }</code></pre>
<p>We’ll explain <code>:not</code> later in this article.</p>
<h4>:nth-last-of-type(n)</h4>
<p>Hopefully, by now you see where this is going: <code>:nth-last-of-type()</code> starts at the end of the selected elements and works backwards.</p>
<p>To select the last paragraph in an article, you would use this:</p>
<pre><code class="language-css">article p:nth-last-of-type(1) { … }</code></pre>
<p>You might want to choose this selector instead of <code>:last-child</code> if your articles don’t always end with paragraphs.</p>
<h4>:first-of-type and :last-of-type</h4>
<p>If <code>:nth-of-type()</code> and <code>:nth-last-of-type()</code> are too specific for your purposes, then you could use a couple of simplified selectors. For example, instead of this…</p>
<pre><code class="language-css">article p:nth-of-type(1) {
font-size: 1.5em; }</code></pre>
<p>… we could just use this:</p>
<pre><code class="language-css">article p:first-of-type {
font-size: 1.5em; }</code></pre>
<p>As you’d expect, <code>:last-of-type</code> works in exactly the same way but from the last element selected.</p>
<p><strong>iPhone Form Example</strong><br>
We can use both <code>:first-of-type</code> and <code>:last-of-type</code> in our iPhone example, particularly when styling the rounded corners. Here’s the CSS:</p>
<pre><code class="language-css">fieldset input:first-of-type:not([type=radio]) {
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

fieldset input:last-of-type:not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }</code></pre>
<p>The first line of CSS adds a top rounded border to all <code>:first-of-type</code> inputs in a fieldset that <em>aren’t</em> radio buttons. The second line adds the bottom rounded border to the last input element in a fieldset.</p>
<h4>:only-of-type</h4>
<p>There’s one more <code>type</code> selector to look at: <code>:only-of-type()</code>. This is useful for selecting elements that are the only one of their kind in their parent element.</p>
<p>For example, consider the difference between this CSS selector…</p>
<pre><code class="language-css">p {
font-size: 18px; }</code></pre>
<p>… and this one:</p>
<pre><code class="language-css">p:only-of-type {
font-size: 18px; }</code></pre>
<p>The first selector will style every paragraph element on the page. The second element will grab a paragraph that is the <em>only</em> paragraph in its parent.</p>
<p>This could be handy when you are styling content or data that has 
been dynamically outputted from a database and the query returns only 
one result.</p>
<p><a href="http://devsnippets.com/article/5-advanced-css-pseudo-class.html">Devsnippet</a><sup class="print_only">15</sup> has created a demo in which <a href="http://www.devsnippets.com/img/advanced-css/only-type.html">single images are styled differently</a><sup class="print_only">16</sup> from multiple images.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/only-of-type-Pseudo-Class.png"><img class="size-full wp-image-94731" title="Devsnippet's :only-of-type demo" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/only-of-type-Pseudo-Class.png" alt="Screenshot"></a><br>
<em>Devsnippet’s demo for :only-of-type.</em></p>
<p><strong>iPhone Form Example</strong><br>
In the case of our iPhone example, we can make sure that all inputs that
 are the only children of a fieldset have rounded corners on both the 
top and bottom. The CSS would be:</p>
<pre><code class="language-css">fieldset input:only-of-type {
border-radius: 10px; }</code></pre>
<h4>:last-child</h4>
<p>It’s a little strange that <code>:first-child</code> was part of the CSS2 spec but that its partner in crime, <code>:last-child</code>,
 didn’t appear until CSS3. It takes no expressions or keywords here; it 
simply selects the last child of its parent element. For example:</p>
<pre><code class="language-css">li {
border-bottom: 1px solid #ccc; }

li:last-child {
border-bottom: none; }</code></pre>
<p>This is a useful way to remove bottom borders from lists. You’ll see this technique quite often in WordPress widgets.</p>
<p>Rachel Andrew looks at <code>:last-child</code> and other CSS pseudo-selectors in her 24 Ways article “<a href="http://24ways.org/2009/cleaner-code-with-css3-selectors">Cleaner Code With CSS3 Selectors</a><sup class="print_only">17</sup>.” Rachel shows us how to use this selector to create a well-formatted image gallery without additional classes.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/Screen-shot-2011-03-22-at-21.49.46.png"><img class="size-full wp-image-94744" title="Screen shot 2011-03-22 at 21.49.46" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/Screen-shot-2011-03-22-at-21.png" alt=":last-child CSS in action from Rachel Andrew"></a><br>
<em>The CSS for :last-child in action, courtesy of Rachel Andrew.</em></p>
<h4>:only-child</h4>
<p>If an element is the only child of its parent, then you can select it with <code>:only-child</code>. Unlike with <code>:only-of-type</code>, it doesn’t matter what type of element it is. For example:</p>
<pre><code class="language-css">li:only-child { … }</code></pre>
<p>We could use this to select list elements that are the only list elements in their <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code> parent.</p>
<h4>:empty</h4>
<p>Finally, in structural pseudo-classes, we have <code>:empty</code>. 
Not surprisingly, this selects only elements that have no children and 
no content. Again, this might be useful when dealing with dynamic 
content outputted from a database.</p>
<pre><code class="language-css">#results:empty {
background-color: #fcc; }</code></pre>
<p>You might use the above to draw the user’s attention to an empty search results section.</p>
<h3>2. The Target Pseudo-Class</h3>
<h4>:target</h4>
<p>This is one of my favourite pseudo-classes, because it allows us to 
style elements on the page based on the URL. If the URL has an 
identifier (that follows an <code>#</code>), then the <code>:target</code> pseudo-class will style the element that shares the ID with the identifier. Take a URL that looks like this:</p>
<blockquote>
<p>http://www.example.com/css3-pseudo-selectors#summary</p>
</blockquote>
<p>The section with the id <code>summary</code> can now be styled like so:</p>
<pre><code class="language-css">:target {
background-color: #fcc; }</code></pre>
<p>This is a great way to style elements on pages that have been linked 
to from external content. You could also use it with internal anchors to
 highlight content that users have skipped to.</p>
<p>Perhaps the most impressive use of <code>:target</code> I’ve seen is <a href="http://dev.opera.com/articles/view/css3-target-based-interfaces/">Corey Mwamba’s Scrolling Site of Green</a><sup class="print_only">18</sup>. Corey uses some creative CSS3 and the <code>:target</code> pseudo-class to create <a href="http://devfiles.myopera.com/articles/3392/example4.html">animated tabbed navigation</a><sup class="print_only">19</sup>.
 The demo contains some clever use of CSS3, illustrating how 
pseudo-classes are often best used in combination with other CSS 
selectors.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/Coreys-scrolling-site-of-green.png"><img class="size-full wp-image-94732" title="Corey's Scrolling Site of Green" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/Coreys-scrolling-site-of-green.png" alt="Screenshot"></a><br>
<em>Corey’s Scrolling Site of Green.</em></p>
<p>There’s also an interesting example over at <a href="http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/">Web Designer Notebook</a><sup class="print_only">20</sup>. In it, <code>:target</code> and Webkit animations are used to highlight blocks of text in target divs. Chris Coyier also creates a <code>:target</code>-based tabbing system at <a href="http://css-tricks.com/css3-tabs/">CSS-Tricks</a><sup class="print_only">21</sup>.</p>
<p><strong>iPhone Form Example</strong><br>
As you’ll see on <a href="http://richardshepherd.com/smashing/psuedo/">my demo page</a><sup class="print_only">22</sup>,
 I’ve added a navigation bar at the top that skips down to different 
sections of the form. We can highlight any section the user jumps to 
with the following CSS:</p>
<pre><code class="language-css">:target {
background-color: rgba(255,255,255,0.3);

-webkit-border-radius:
10px;}</code></pre>
<h3>3. The UI Element States Pseudo-Classes</h3>
<h4>:enabled and :disabled</h4>
<p>Together with <code>:checked</code>, <code>:enabled</code> and <code>:disabled</code>
 make up the three pseudo-classes for UI element states. That is, they 
allow you to style elements (usually form elements) based on their 
state. A state could be set by the user (as with <code>:checked</code>) or by the developer (as with <code>:enabled</code> and <code>:disabled</code>). For example, we could use the following:</p>
<pre><code class="language-css">input:enabled {
background-color: #dfd; }

input:disabled {
background-color: #fdd; }</code></pre>
<p>This is a great way to give feedback on what users can and cannot 
fill in. You’ll often see this dynamic feature enhanced with JavaScript.</p>
<p><strong>iPhone Form Example</strong><br>
To illustrate <code>:disabled</code> in practice, I have disabled the form’s “Submit” button in the HTML and added this line of CSS:</p>
<pre><code class="language-css">:disabled {
color: #600; }</code></pre>
<p>The button text is now red!</p>
<h4>:checked</h4>
<p>The third pseudo-class here is <code>:checked</code>, which deals 
with the state of an element such as a checkbox or radio button. Again, 
this is very useful for giving feedback on what users have selected. For
 example:</p>
<pre><code class="language-css">input[type=radio]:checked {
font-weight: bold; }</code></pre>
<p><strong>iPhone Form Example</strong><br>
As a flourish, we can use CSS to highlight the text next to each radio button once the button has been pressed:</p>
<pre><code class="language-css">input:checked + label {
text-shadow: 0 0 6px #fff; }</code></pre>
<p>We first select any input that has been checked, and then we look for the very next <code>&lt;span&gt;</code> element that contains our text. Highlighting the text with a simple <code>text-shadow</code> is an effective way to provide user feedback.</p>
<h3>4. Negation Pseudo-Class</h3>
<h4>:not</h4>
<p>This is another of my favorites, because it selects everything <em>except</em> the element you specify. For example:</p>
<pre><code class="language-css">:not(footer) { … }</code></pre>
<p>This selects everything on the page that is not a footer element. 
When used with form inputs, they allow us to get a little sneakier:</p>
<pre><code class="language-css">input:not([type=submit]) { … }
input:not(disabled) { … }</code></pre>
<p>The first line selects every form input that’s not a “Submit” button,
 which is useful for styling forms. The second selects all input 
elements that are not enabled; again useful for giving feedback on how 
to fill in a form.</p>
<p><strong>iPhone User Example</strong><br>
You’ve already seen the <code>:not</code> selector in action. It’s 
particularly powerful when chained with other CSS3 pseudo-selectors. 
Let’s take a closer look at one example:</p>
<pre><code class="language-css">fieldset input:not([type=radio]) {
margin: 0;
width: 290px;
font-size: 18px;
border-radius: 0;
border-bottom: 0;
border-color: #999;
padding: 8px 10px;}</code></pre>
<p>Here we are selecting all inputs inside fieldset elements that are <em>not</em>
 radio buttons. This is incredibly useful when styling forms because you
 will often want to style text inputs different from select boxes, radio
 buttons and “Submit” buttons.</p>
<p>Check out <a href="http://richardshepherd.com/smashing/pseudo/">our final page</a><sup class="print_only">23</sup>.</p>
<h3>What’s Old Is New Again</h3>
<p>Let’s go back to the beginning of our story and the humble <code>a:link</code>. HTML5 arrived on the scene recently and brought with it an <a href="http://dev.w3.org/html5/spec/Overview.html#the-a-element">exciting change</a><sup class="print_only">24</sup> to the <code>&lt;a&gt;</code> element that gives the CSS3 pseudo-selector an additive effect.</p>
<p>An <code>&lt;a&gt;</code> element can now be wrapped around 
block-level elements, turning whole sections of your page into links (as
 long as those sections don’t contain other interactive elements). 
Whereas JavaScript was once popular for making entire <code>&lt;div&gt;</code> elements clickable, you can now do so by wrapping sections in <code>&lt;a&gt;</code> tags, like so:</p>
<pre><code class="language-markup tmp-html">&lt;a href="http://www.smashing-magazine.com"&gt;
&lt;div id="advert"&gt;
&lt;hgroup&gt;
&lt;h1&gt;Jackson’s Widgets&lt;/h1&gt;
&lt;h2&gt;The finest widgets in Kentucky&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;p&gt;Buy Jackson’s Widgets today,
and be sure of a trouble-free life for you,
your widget and your machinery.
Trusted and sold since 1896.&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;</code></pre>
<p>The implication for CSS pseudo-selectors is that you can now style a <code>&lt;div&gt;</code> based on whether it is being hovered over (<code>a:hover</code>) or is active (<code>a:active</code>), like so:</p>
<pre><code class="language-css">a:hover #advert {
background-color: #f7f7f7; }</code></pre>
<p>Anything that decreases JavaScript and increases semantic code has to be good!</p>
<h3>Cross-Browser Compatibility</h3>
<p>You had to ask, didn’t you! Unbelievably, Internet Explorer 8 (and 
earlier) doesn’t support any of these selectors, whereas the latest 
versions of Chrome, Opera, Safari and Firefox all do. Before your blood 
boils, consider the following solutions.</p>
<h4>Internet Explorer 9</h4>
<p>Unless you’ve been living under a rock for the last week, you’ll have
 heard that Microsoft unleashed its latest browser on an unsuspecting 
public. The good thing is, it’s actually quite good. While I don’t 
expect people who are reading this article to change their browsing 
habits, <strong>it’s worth remembering</strong> that the majority of the
 world uses IE; and thanks to Windows Update and a global marketing 
campaign, we can hope to see IE9 as the dominant Windows browser in the 
near future. That’s good for Web designers, and it’s good for 
pseudo-selectors. But what about IE8 and its ancestors?</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/ie9.png"><img class="size-full wp-image-94124" title="ie9" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ie9.png" alt="Screenshot"></a><br>
<em>Internet Explorer 9 is here.</em></p>
<h4>JavaScript</h4>
<p>Our old friend JavaScript comes to the rescue. I particularly like <a href="http://selectivizr.com/">Selectivizr</a><sup class="print_only">25</sup>
 by Keith Clark. Keith has put together a lovely script that, in 
combination with your JavaScript library of choice, adds CSS3 
pseudo-class selector functionality for earlier versions of IE. Be 
warned that some libraries fare better than others: if you’re using 
MooTools with Selectivizr, then all the pseudo-classes will be 
available, but if you’re relying on jQuery to do the heavy lifting, then
 a number of the selectors won’t work at all.</p>
<p><a style="border: medium none;" href="http://media.smashingmagazine.com/wp-content/uploads/2011/03/selectivizr.jpg"><img class="size-full wp-image-93196" title="selectivizr" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/selectivizr.jpg" alt="Screenshot"></a><br>
<em>Selectivizr.</em></p>
<p>Keith recently released a <a href="https://github.com/keithclark/JQuery-Extended-Selectors">jQuery plug-in</a><sup class="print_only">26</sup> that extends jQuery to include support for the following CSS3 pseudo-class selectors:</p>
<ul>
<li><code>:first-of-type</code></li>
<li><code>:last-of-type</code></li>
<li><code>:only-of-type</code></li>
<li><code>:nth-of-type</code></li>
<li><code>:nth-last-of-type</code></li>
</ul>
<p>It’s also worth looking at the ubiquitous <em>ie7.js</em> script (and its successors) by <a href="http://code.google.com/p/ie7-js/">Dean Edwards</a><sup class="print_only">27</sup>. This script solves a number of IE-related problems, including CSS3 pseudo-selectors.</p>
<h4>So, Should We Start Using CSS3 Pseudo-Selectors Today?</h4>
<p>I guess the answer to that question depends on how you view 
JavaScript. It’s true that pseudo-selectors can be completely replaced 
with classes and IDs; but it’s also true that, when styling complex 
layouts, pseudo-selectors are both incredibly useful and the natural 
next step for your CSS. If you find that they<strong> improve the readability of your CSS</strong> and reduce the need for (non-semantic) classes in your HTML, then it I’d definitely recommend embracing them today.</p>
<p>You could use two selectors and fall back on a class name, but that 
would just duplicate work. It also means that you wouldn’t need the 
pseudo-classes in the first place. But if you did choose to go down this
 path, the code might look something like this:</p>
<pre><code class="language-css">li:nth-of-type(3),
li.third { … }</code></pre>
<p>This method is not as flexible as using pseudo-classes because you 
have to keep updating the HTML and CSS when the page content changes.</p>
<p>If a lot of your users don’t have JavaScript enabled, that puts you 
in a bit of a bind. Many Web designers argue that functionality (i.e. 
JavaScript) is different from layout (i.e. CSS), and so you should not 
rely on JavaScript to make pseudo-selectors work in IE8 and earlier.</p>
<p>While I agree with the principle, in practice I believe that 
providing the best possible experience to 99% of your users is better 
than accounting for the remaining 1% (or however big your non-JavaScript
 base may be).</p>
<p>Follow your website’s analytics, and <strong>be prepared to make decisions that improve your skills</strong> as a Web designer and, more importantly, provide the best experience possible to the majority of users.</p>
<h3>Final Thoughts</h3>
<p>It’s hard not to be depressed by IE8’s complete lack of support for 
pseudo-classes. Arguably, having the browser calculate and recalculate 
page styles in this fashion will have implications for rendering speed; 
but because all other major browsers now support these selectors, it’s 
frustrating that most of our users can’t benefit from them without a 
JavaScript hack.</p>
<p>But as Professor Farnsworth says, “Good news everyone!” Breaking on 
the horizon is the dawn of Internet Explorer 9, and Microsoft has made 
sure that its new browser <a href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoclasses">supports each and every one</a><sup class="print_only">28</sup> of the selectors discussed in this article.</p>
<p>CSS3 pseudo-selectors won’t likely take up large chunks of your style
 sheets. They are specific yet dynamic and are more likely, at least 
initially, to add finishing touches to a page than to set an overall 
style. Perhaps you want to drop the bottom border in the last item of a 
list, or give visual feedback to users as they fill in a form. <strong>This is all possible with CSS3</strong>, and as usage becomes more mainstream, I expect these will become a regular part of the Web designer’s toolbox.</p>
<p>If you’ve seen any interesting or exciting uses of these selectors out there in the field, do let us know in the comments below.</p>
<h4>Other Resources</h4>
<p>You may be interested in the following articles and related resources:</p>
<ul>
<li><a href="http://www.w3.org/TR/css3-selectors/">The Official CSS3 Selectors Proposed Recommendation</a><sup class="print_only">29</sup><br>
Everything you need to know, from the folks in charge.</li>
<li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">Wikipedia’s Guide to Cascading Style Sheets</a><sup class="print_only">30</sup><br>
A good background read, and the bibliography is a great resource.</li>
<li><a href="http://css-tricks.com/how-nth-child-works/">How nth-child Works</a><sup class="print_only">31</sup><br>
A comprehensive guide from the ever-reliable Chris Coyier.</li>
<li><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages">Internet Explorer 9</a><sup class="print_only">32</sup><br>
If you haven’t yet played around with Redmond’s latest offering, you’re in for a pleasant surprise.</li>
</ul>
<p><em>(al) (ik)</em></p>
            
        <div class="tagsdata">
            <p class="tags longtags"><strong>Tags:</strong><a href="http://coding.smashingmagazine.com/tag/css/" title="View all articles tagged 'CSS' (141)">CSS</a><sup class="print_only">33</sup><a href="http://coding.smashingmagazine.com/tag/css3/" title="View all articles tagged 'CSS3' (26)">CSS3</a><sup class="print_only">34</sup><a href="http://coding.smashingmagazine.com/tag/essentials/" title="View all articles tagged 'Essentials' (35)">Essentials</a><sup class="print_only">35</sup></p>            <p><a href="#top" class="backtotop single" title="Jump to the top of the page">↑ Back to top</a><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F03%2F30%2Fhow-to-use-css3-pseudo-classes%2F&amp;source=tweetbutton&amp;text=How%20To%20Use%20CSS3%20Pseudo-Classes&amp;url=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F03%2F30%2Fhow-to-use-css3-pseudo-classes%2F&amp;via=smashingmag" class="share-on-twitter single" title="Share on Twitter!">Share on Twitter</a></p>
        </div>
    </article><ul class="print_only_notelist"><li><h4>Footnotes:</h4></li><li><sup>1</sup> latest W3C spec - http://www.w3.org/TR/css3-selectors/</li><li><sup>2</sup> CSS1 - http://www.w3.org/TR/CSS1/</li><li><sup>3</sup> HTML4 - http://www.w3.org/TR/html401/</li><li><sup>4</sup> CSS2 - http://www.w3.org/TR/CSS2/</li><li><sup>5</sup> HTML5 - http://www.w3.org/html/logo/</li><li><sup>6</sup> CSS Proposed Recommendation - http://www.w3.org/TR/css3-selectors/</li><li><sup>7</sup> on my website - http://richardshepherd.com/smashing/pseudo/?style=0</li><li><sup>8</sup> SitePoint points out - http://reference.sitepoint.com/css/understandingnthchildexpressions</li><li><sup>9</sup> WebDesign &amp; Such - http://webdesignandsuch.com/add-zebra-striping-to-a-table-with-css3/</li><li><sup>10</sup> demo of zebra striping - http://webdesignandsuch.com/posts/zebra-striping/index.html</li><li><sup>11</sup> Webvisionary Awards - http://webvisionaryawards.com/</li><li><sup>12</sup> Lea Verou - http://leaverou.me/</li><li><sup>13</sup> CSS3 structural pseudo-class selector tester - http://leaverou.me/demos/nth.html</li><li><sup>14</sup> beautiful infographic about his 45 RPM record collection - http://www.fortherecord.simonfosterdesign.com/</li><li><sup>15</sup> Devsnippet - http://devsnippets.com/article/5-advanced-css-pseudo-class.html</li><li><sup>16</sup> single images are styled differently - http://www.devsnippets.com/img/advanced-css/only-type.html</li><li><sup>17</sup> Cleaner Code With CSS3 Selectors - http://24ways.org/2009/cleaner-code-with-css3-selectors</li><li><sup>18</sup> Corey Mwamba’s Scrolling Site of Green - http://dev.opera.com/articles/view/css3-target-based-interfaces/</li><li><sup>19</sup> animated tabbed navigation - http://devfiles.myopera.com/articles/3392/example4.html</li><li><sup>20</sup> Web Designer Notebook - http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/</li><li><sup>21</sup> CSS-Tricks - http://css-tricks.com/css3-tabs/</li><li><sup>22</sup> my demo page - http://richardshepherd.com/smashing/psuedo/</li><li><sup>23</sup> our final page - http://richardshepherd.com/smashing/pseudo/</li><li><sup>24</sup> exciting change - http://dev.w3.org/html5/spec/Overview.html#the-a-element</li><li><sup>25</sup> Selectivizr - http://selectivizr.com/</li><li><sup>26</sup> jQuery plug-in - https://github.com/keithclark/JQuery-Extended-Selectors</li><li><sup>27</sup> Dean Edwards - http://code.google.com/p/ie7-js/</li><li><sup>28</sup> supports each and every one - http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#pseudoclasses</li><li><sup>29</sup> The Official CSS3 Selectors Proposed Recommendation - http://www.w3.org/TR/css3-selectors/</li><li><sup>30</sup> Wikipedia’s Guide to Cascading Style Sheets - http://en.wikipedia.org/wiki/Cascading_Style_Sheets</li><li><sup>31</sup> How nth-child Works - http://css-tricks.com/how-nth-child-works/</li><li><sup>32</sup> Internet Explorer 9 - http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages</li><li><sup>33</sup> CSS - http://coding.smashingmagazine.com/tag/css/</li><li><sup>34</sup> CSS3 - http://coding.smashingmagazine.com/tag/css3/</li><li><sup>35</sup> Essentials - http://coding.smashingmagazine.com/tag/essentials/</li></ul>	
	
    <div class="bio clearfix">
        <div class="gravatar">
            <img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962.png" class="avatar avatar-78 photo">        </div>
        <div class="about">
            <a rel="author" href="http://coding.smashingmagazine.com/author/richard-shepherd/?rel=author" title="Posts by Richard Shepherd" class="post-author">Richard Shepherd</a>            <p>Richard (<a href="http://twitter.com/richardshepherd">@richardshepherd</a>)
 is a UK based web designer and front-end developer. He loves to play 
with HTML5, CSS3, jQuery and WordPress, and currently works full-time 
bringing <a href="http://www.vouchercodes.co.uk/">VoucherCodes.co.uk</a> to life. He has an awesomeness factor of 8, and you can also find him at <a href="http://richardshepherd.com/">richardshepherd.com</a>.</p>
        </div>
    </div>
	
        <div class="related-articles">
        <h2>Related Articles</h2>
                    <div class="related-article">
                <a style="border: medium none;" class="post-picture" href="http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/related-084.jpg" alt="The Guide To CSS Animation: Principles and Examples"></a>
                <h3><a href="http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/">The Guide To CSS Animation: Principles and Examples</a></h3>
            </div>
                    <div class="related-article">
                <a style="border: medium none;" class="post-picture" href="http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/related-081.jpg" alt="CSS3 Flexible Box Layout Explained"></a>
                <h3><a href="http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/">CSS3 Flexible Box Layout Explained</a></h3>
            </div>
                    <div class="related-article">
                <a style="border: medium none;" class="post-picture" href="http://coding.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/related-posts-108.jpg" alt="50 Brilliant CSS3/JavaScript Coding Techniques"></a>
                <h3><a href="http://coding.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/">50 Brilliant CSS3/JavaScript Coding Techniques</a></h3>
            </div>
            </div>
    
<!-- Smashing Magazine - Comment spnsr ed spot -->
<a id="comments"></a>

<div class="newsletter-advertisement">
	<div id="mc_embed_signup" class="sm-search">
		<p>Every other Tuesday we send out our lovely <strong style="font-family: 'Proxima Nova Bold',Arial,Verdana,sans-serif;">email newsletter</strong>
 with useful tips and techniques, recent articles and upcoming events. 
143,000 readers have signed up already. Why don't you sign up, too?</p>
		<form action="http://smashingmagazine.us1.list-manage1.com/subscribe/post?u=16b832d9ad4b28edf261f34df&amp;id=a1666656e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
			<input name="EMAIL" placeholder="email address" type="text">
 			<button class="search_submit" type="submit"><span class="first-type">Sign Up!</span></button>
			<div class="clearfix">
				<div class="num-subscribers"><script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/subscriber-count.js"></script><div class="mc-badge mc-badge05 mc-badge05-sub04" style="color: rgb(81, 81, 74); font-family: sans-serif; font-size: 11px; font-weight: bold; margin: 0pt; padding: 0pt; width: auto; display: inline-block;">	<p style="color: rgb(233, 92, 65); font-family: sans-serif; font-size: 11px; font-weight: bold; margin: 0pt; padding: 0pt; line-height: 1em; width: auto; max-width: 195px;"><span class="subscriber-count" style="display: block; float: left; background-color: rgb(233, 92, 65); color: rgb(255, 255, 255); padding: 4px 6px; line-height: 1em; -moz-border-radius: 2px 2px 2px 2px; font-size: 14px; margin-right: 5px; border-top: 1px solid rgb(152, 60, 42);">154,442</span> <span style="display: block; float: left; padding-top: 0px;">Subscribers</span> <a href="http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&amp;utm_medium=email&amp;utm_campaign=monkey_rewards&amp;aid=16b832d9ad4b28edf261f34df&amp;afl=1" target="_blank" class="powered-by" style="color: rgb(81, 81, 74); font-family: sans-serif; font-size: 11px; font-weight: bold; margin: 0pt; padding: 0px 0pt 0pt; background: url(&quot;http://gallery.mailchimp.com/089443193dd93823f3fed78b4/images/powered_by_mailchimp01.png&quot;) no-repeat scroll 50% bottom transparent; display: block; height: 15px; width: 113px; text-indent: -9999px; float: left;">Email marketing powered by MailChimp</a></p></div></div>
			</div>
		</form>
	</div>
</div>
<ul class="sub-tabs clearfix">
    <li><a href="#show-comments" class="active">63 Comments</a></li>
    <li><a href="#best-comments">Best Comments</a></li></ul>

<div id="discussion" class="subtab-pages">
    <div style="display: block;" id="show-comments">
                <ol id="comments-overview" class="commentlist">
                <li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">1</span>
    <div class="comment" id="comment-523222">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/b84768256931bf83eec5429d2f5e5e39.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">ev4n</h3> 
        		<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523222">March 30th, 2011 2:42 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article, knew most of this already but its a great list with good examples.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523222#respond" onclick='return addComment.moveForm("comment-523222", "523222", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523222-down" style="opacity: 0.3;" title="Vote down! (3 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523222-up" style="opacity: 0.3;" title="Vote up! (4 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">2</span>
    <div class="comment" id="comment-523236">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/62ac69747c262a7323834513593f095f.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">gorlok</h3> 
        		<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523236">March 30th, 2011 3:43 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Why MS don’t push IE9 on Windows XP? Why?? :-(</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523236#respond" onclick='return addComment.moveForm("comment-523236", "523236", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+6</div>
        		<a class="ratebtn down_active" id="btn-523236-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523236-up" style="opacity: 0.3;" title="Vote up! (7 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-2 clearfix ">
    <span class="commentnumber">3</span>
    <div class="comment" id="comment-523251">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/163dd74065e9e42c14f9edf7d4c68efb.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">kayin</h3> 
        		<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523251">March 30th, 2011 4:54 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>’cause mainstream support for XP was ended a year ago.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523251#respond" onclick='return addComment.moveForm("comment-523251", "523251", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523251-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523251-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">4</span>
    <div class="comment" id="comment-523252">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/afe4b735d07a4eadf2b692ff1cd1170c.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">John Flickinger</h3> 
        		<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523252">March 30th, 2011 5:19 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Another possible reason is that IE9 uses hardware 
acceleration for rendering which probably hooks into the OS. Versions of
 Vista before SP2 don’t support IE9 either.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523252#respond" onclick='return addComment.moveForm("comment-523252", "523252", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+2</div>
        		<a class="ratebtn down_active" id="btn-523252-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523252-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber">5</span>
    <div class="comment" id="comment-523715">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/46df155b770c796079dd93402b59e1bf.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tom</h3> 
        		<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523715">April 1st, 2011 7:21 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>But Firefox 4 also use hardware acceleration on Win XP. And 
maybe I’m wrong, but I think I read, that Firefox uses the same 
interfaces, that IE9 could use on XP.</p>
<p>So in this case I think it’s more a political decision than a technical one.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523715#respond" onclick='return addComment.moveForm("comment-523715", "523715", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+2</div>
        		<a class="ratebtn down_active" id="btn-523715-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523715-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">6</span>
    <div class="comment" id="comment-523651">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/03edc38fd0aa05e41236cd3aed11c43c.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">John</h3> 
        		<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523651">April 1st, 2011 1:29 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Microsoft is pushing towards their Windows 7 platform and 
the support for XP has ended, so they’re not going to bother having an 
IE9 browser on XP, they’ll lose some market share on this.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523651#respond" onclick='return addComment.moveForm("comment-523651", "523651", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523651-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523651-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">7</span>
    <div class="comment" id="comment-523237">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/e0ac2f5ea3a162020f279d17acfb1bfd.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Edson</h3> 
        		<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523237">March 30th, 2011 3:49 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>One of the best articles I’ve read! I’ll keep it as a quick reference guide for my projects from now on. Tks for share!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523237#respond" onclick='return addComment.moveForm("comment-523237", "523237", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523237-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523237-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">8</span>
    <div class="comment" id="comment-523238">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/8356de6b9c6fb4542e7a95bf041e53a9.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">dsri</h3> 
        		<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523238">March 30th, 2011 3:52 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great example for Pseudo class really awesome.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523238#respond" onclick='return addComment.moveForm("comment-523238", "523238", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+2</div>
        		<a class="ratebtn down_active" id="btn-523238-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523238-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">9</span>
    <div class="comment" id="comment-523242">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/7438e24e40d16589fd11a5b4b360c4d6.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Michael Ward</h3> 
        		<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523242">March 30th, 2011 4:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>The :last-child pseduo-selector was originally omitted from 
css2 because of performance considerations. It’s easy for a browser to 
know if an element is the first child as soon as it comes across it – 
there’s little to no performance penalty – but the browser has to loop 
back on itself when it gets to the last child. This will probably change
 the formatting of the element and force a full reflow of the doucment. 
That’s expensive CPU wise.</p>
<p>Of course, this seems a little silly now – but back when css 2 was 
being drafted these performance considerations were very real. Even 
today, we should be careful about the use of dynamic selectors if we 
care about performance.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523242#respond" onclick='return addComment.moveForm("comment-523242", "523242", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+5</div>
        		<a class="ratebtn down_active" id="btn-523242-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523242-up" style="opacity: 0.3;" title="Vote up! (5 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment byuser comment-author-richard-shepherd bypostauthor odd alt depth-2 clearfix ">
    <span class="commentnumber">10</span>
    <div class="comment" id="comment-523254">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523254">March 30th, 2011 5:20 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Michael,</p>
<p>You make a really good point about speed. Lots of pseudo-selectors 
can affect performance, although I’ve yet to see a page that has 
suffered a great deal from this.</p>
<p>Richard</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523254#respond" onclick='return addComment.moveForm("comment-523254", "523254", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+2</div>
        		<a class="ratebtn down_active" id="btn-523254-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523254-up" style="opacity: 0.3;" title="Vote up! (3 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">11</span>
    <div class="comment" id="comment-523253">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/afe4b735d07a4eadf2b692ff1cd1170c.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">John Flickinger</h3> 
        		<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523253">March 30th, 2011 5:20 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>With the background color example, what is the difference between targeting the body tag and targeting the html tag?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523253#respond" onclick='return addComment.moveForm("comment-523253", "523253", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+3</div>
        		<a class="ratebtn down_active" id="btn-523253-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523253-up" style="opacity: 0.3;" title="Vote up! (3 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">12</span>
    <div class="comment" id="comment-523407">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/8ee3c28c59894eb0ed12197594516517.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Neil Creagh</h3> 
        		<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523407">March 31st, 2011 1:18 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I’d also like to know this.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523407#respond" onclick='return addComment.moveForm("comment-523407", "523407", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult negative">-1</div>
        		<a class="ratebtn down_active" id="btn-523407-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523407-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even depth-2 clearfix ">
    <span class="commentnumber">13</span>
    <div class="comment" id="comment-523430">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/c72094919478984cbb8c2aa1626199b8.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Pat</h3> 
        		<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523430">March 31st, 2011 4:58 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>There’s no difference it just depends how you use them. In 
my code I usually style both the html and body tags as it means I need 
less divs in my HTML for containers/backgrounds.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523430#respond" onclick='return addComment.moveForm("comment-523430", "523430", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult negative">-2</div>
        		<a class="ratebtn down_active" id="btn-523430-down" style="opacity: 0.3;" title="Vote down! (2 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523430-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">14</span>
    <div class="comment" id="comment-523255">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/bbaf667d6bafbb7d4e8e1ad4912a259d.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">matt</h3> 
        		<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523255">March 30th, 2011 5:36 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>great article. annoying links on either side of the page though, thanks for that…</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523255#respond" onclick='return addComment.moveForm("comment-523255", "523255", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523255-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523255-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">15</span>
    <div class="comment" id="comment-523258">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/70cd8fda78dde1cab108931bc9520804.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Linus Hultin</h3> 
        		<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523258">March 30th, 2011 5:47 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Wow! Simply great article. Just what I needed. Just one 
question(maybe I’ve missed it in the article); what if I have a class 
where I want the first letter of each word to be a bigger font, is this 
possible?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523258#respond" onclick='return addComment.moveForm("comment-523258", "523258", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523258-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523258-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">16</span>
    <div class="comment" id="comment-523270">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/9ffceb2e719ae7571b38ce51ae0ba0c9.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Allen</h3> 
        		<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523270">March 30th, 2011 6:33 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>You’re looking for this:</p>
<p>.yourClass {<br>
text-transform: capitalize;<br>
}</p>
<p>edit ( sorry, misread that… thought you said cap… not enlarge font… nothing comes to mind.)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523270#respond" onclick='return addComment.moveForm("comment-523270", "523270", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523270-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523270-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment byuser comment-author-richard-shepherd bypostauthor even depth-2 clearfix ">
    <span class="commentnumber">17</span>
    <div class="comment" id="comment-523391">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523391">March 30th, 2011 11:31 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Linus,</p>
<p>Yep! You need :first-letter pseudo element, which you can read about over at <a href="http://www.w3.org/TR/CSS2/selector.html#first-letter" rel="nofollow">http://www.w3.org/TR/CSS2/selector.html#first-letter</a></p>
<p>Richard</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523391#respond" onclick='return addComment.moveForm("comment-523391", "523391", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523391-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523391-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">18</span>
    <div class="comment" id="comment-523396">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/c4ac009bc7545973d08fb92f2e92f91d.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Kuro</h3> 
        		<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523396">March 31st, 2011 12:25 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>:first-letter is a css2 pseudo-class you could use.<br>
Should work even on older versions of Internet Explorer.</p>
<p>.yourClass:first-letter {<br>
font-size: 1.5em<br>
}</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523396#respond" onclick='return addComment.moveForm("comment-523396", "523396", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523396-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523396-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">19</span>
    <div class="comment" id="comment-523284">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f92ac93206dae099180e09eaad1b408a.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Chris Nager</h3> 
        		<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523284">March 30th, 2011 8:44 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Outstanding article! I am intrigued by the :not, :empty and 
:target pseudo-classes. I can see many of these being extremely helpful.
 You outlined each new pseudo-class perfectly and explained them with 
great examples. #smftw</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523284#respond" onclick='return addComment.moveForm("comment-523284", "523284", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+3</div>
        		<a class="ratebtn down_active" id="btn-523284-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523284-up" style="opacity: 0.3;" title="Vote up! (3 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">20</span>
    <div class="comment" id="comment-524995">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f92ac93206dae099180e09eaad1b408a.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Chris Nager</h3> 
        		<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524995">April 8th, 2011 1:30 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>ul:hover li:not(:hover) { opacity: .1; }<br>
<a href="http://chrisnager.com/playground/zodiac/" rel="nofollow">http://chrisnager.com/playground/zodiac/</a></p>
<p>I used the “:not ” pseudo-class and absolutely love it!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524995#respond" onclick='return addComment.moveForm("comment-524995", "524995", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+2</div>
        		<a class="ratebtn down_active" id="btn-524995-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524995-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">21</span>
    <div class="comment" id="comment-523285">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/dd09965da546e9b1eece44bf170f096f.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Zach Hilbrich</h3> 
        		<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523285">March 30th, 2011 8:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>This was an amazing article im a new to all this 
CSS/Javascript/HTML, but man it is exciting to learn about. I hope i can
 apply this to some of the stuff im trying to put together myself.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523285#respond" onclick='return addComment.moveForm("comment-523285", "523285", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523285-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523285-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">22</span>
    <div class="comment" id="comment-523305">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/09ed4b86f0fa97e4f5a1e6bcca6e1f1b.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Craig Anthony</h3> 
        		<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523305">March 30th, 2011 10:22 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Nice write-up. Thanks.</p>
<p>To add to this article, here is another. It specifies browser 
compatibility per selector. Using “nth” is still a bit tricky since it 
isn’t supported in IE8. Sure there are fixes, but they aren’t that super
 in my humble opinion.</p>
<p>The 30 CSS Selectors you Must Memorize: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/</a></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523305#respond" onclick='return addComment.moveForm("comment-523305", "523305", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523305-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523305-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">23</span>
    <div class="comment" id="comment-523367">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/6def09dd9f39c8468e1e608af6733ce2.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Kamal</h3> 
        		<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523367">March 30th, 2011 8:39 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Very nice tutorial really learnt from it. Pseudo classes can make the life of web designer much easier.  :- )</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523367#respond" onclick='return addComment.moveForm("comment-523367", "523367", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523367-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523367-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">24</span>
    <div class="comment" id="comment-523399">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/47e10f85a1c220fe42eac90d2e112583.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Mellifico</h3> 
        		<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523399">March 31st, 2011 12:32 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thanks for this quite exhaustive article. Very useful.</p>
<p>About IE &gt; radical solution : stop fixing it &gt; Users will change their browser &gt; end of headache…[half-troll inside]</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523399#respond" onclick='return addComment.moveForm("comment-523399", "523399", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523399-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523399-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-2 clearfix ">
    <span class="commentnumber">25</span>
    <div class="comment" id="comment-523457">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/6666ae2b2012ee49fe01c5e18ebfe2d0.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Mick</h3> 
        		<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523457">March 31st, 2011 7:04 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>An even more radical solution – write cleaner code &gt; 
don’t present broken sites to users &gt; enjoy the challenge &gt; get 
paid from clients.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523457#respond" onclick='return addComment.moveForm("comment-523457", "523457", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523457-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523457-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">26</span>
    <div class="comment" id="comment-523404">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/561d60c8e3f838712f4f22d3257e22e0.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Surfista</h3> 
        		<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523404">March 31st, 2011 1:01 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great post, simple and usefull  :D</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523404#respond" onclick='return addComment.moveForm("comment-523404", "523404", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523404-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523404-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">27</span>
    <div class="comment" id="comment-523418">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/bc1964783bb56f2926a195367c8a5248.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rian</h3> 
        		<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523418">March 31st, 2011 3:21 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>i’ve a question..<br>
can i combine two pseudo class.<br>
like :first-child and :hover in selector?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523418#respond" onclick='return addComment.moveForm("comment-523418", "523418", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523418-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523418-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment byuser comment-author-richard-shepherd bypostauthor odd alt depth-2 clearfix ">
    <span class="commentnumber">28</span>
    <div class="comment" id="comment-523433">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523433">March 31st, 2011 5:09 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Rian,</p>
<p>Absolutely! It’s one of the great things about pseudo-classes :)</p>
<p>For example, you could try </p>
<p>section:nth-of-type(-n+3) ul:first-child li:hover { … }</p>
<p>Richard</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523433#respond" onclick='return addComment.moveForm("comment-523433", "523433", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523433-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523433-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">29</span>
    <div class="comment" id="comment-523423">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/de87d78c47a8f6e6802c23544ef4bd90.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">web3mantra</h3> 
        		<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523423">March 31st, 2011 4:00 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thanks for sharing this post.I like this post.It contains good examples of how to use css3 pseudo classes.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523423#respond" onclick='return addComment.moveForm("comment-523423", "523423", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523423-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523423-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">30</span>
    <div class="comment" id="comment-523427">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/cb023a8d91aa3f440dd0265080504adc.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rajiv</h3> 
        		<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523427">March 31st, 2011 4:41 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>What about the :before and :after pseudo classes ??…<br>
Why u left out on these?<br>
These are very tricky and important… I want to know more about them..!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523427#respond" onclick='return addComment.moveForm("comment-523427", "523427", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523427-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523427-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment byuser comment-author-richard-shepherd bypostauthor even depth-2 clearfix ">
    <span class="commentnumber">31</span>
    <div class="comment" id="comment-523432">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #31" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523432">March 31st, 2011 5:02 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Rajiv,</p>
<p>You’re right, :before and :after are both important and useful! 
However, in this article I’ve focused on CSS3 pseudo-classes, and 
:before and :after are pseudo-elements from the CSS2 spec.</p>
<p>You can read more about them over at <a href="http://www.w3.org/TR/CSS21/generate.html" rel="nofollow">http://www.w3.org/TR/CSS21/generate.html</a></p>
<p>Hope that helps!<br>
Richard</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523432#respond" onclick='return addComment.moveForm("comment-523432", "523432", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523432-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523432-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">32</span>
    <div class="comment" id="comment-523438">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ad516503a11cd5ca435acc9bb6523536.png" class="avatar avatar-38 photo avatar-default">        	<div class="authormeta">
       			<h3 class="comment-author">Michel Bozgounov</h3> 
        		<span class="datetime"><a title="Commentlink #32" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523438">March 31st, 2011 5:24 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Excellent article! :)</p>
<p>On a <em>//sidenote</em>, I think CSS(3) starts to become a bit too complex to my taste… It now looks more like a programming language <em>(nth-child minus three multiplied by two will target the seventh row from a table, counting from the top?… :-)</em>…
 closer to JavaScript, for example. And now we can also do animations 
with it, paint gradients, round corners, 
rotate/scale/move/fade-in/fade-out objects, etc…</p>
<p>While CSS2.1 was (in some ways) a bit limited, it was fairly simple 
and all you had to do was take into account the difference in browsers 
and how they interpret the standard. Now it seems large parts of 
JavaScript are moving into CSS3, and make me feel like I am starting to 
become a Web programmer (and not front end developer). Maybe change is a
 good thing, though… time will show! :)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523438#respond" onclick='return addComment.moveForm("comment-523438", "523438", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523438-down" style="opacity: 0.3;" title="Vote down! (2 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523438-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment byuser comment-author-richard-shepherd bypostauthor even depth-2 clearfix ">
    <span class="commentnumber">33</span>
    <div class="comment" id="comment-523522">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #33" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523522">March 31st, 2011 11:02 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Really interesting thoughts, Michel. Thanks for sharing.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523522#respond" onclick='return addComment.moveForm("comment-523522", "523522", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+3</div>
        		<a class="ratebtn down_active" id="btn-523522-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523522-up" style="opacity: 0.3;" title="Vote up! (3 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">34</span>
    <div class="comment" id="comment-523440">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/0ea26a9aac808e37dda12a9015c5bb5c.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Frederick</h3> 
        		<span class="datetime"><a title="Commentlink #34" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523440">March 31st, 2011 5:42 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>My major gripe with a lot of this CSS3 stuff is if we’re 
STILL dealing with IE6 (so much to the point where Microsoft itself is 
running a website to celebrate the Death of IE6) how long are we going 
to be stuck with IE7 and IE8.  I purposely fire up IE8 whenever I see an
 HTML5/CSS3 demo just so I can ground myself and know that I can’t use 
any of these techniques.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523440#respond" onclick='return addComment.moveForm("comment-523440", "523440", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523440-down" style="opacity: 0.3;" title="Vote down! (3 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523440-up" style="opacity: 0.3;" title="Vote up! (4 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment byuser comment-author-richard-shepherd bypostauthor even depth-2 clearfix ">
    <span class="commentnumber">35</span>
    <div class="comment" id="comment-523524">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Richard Shepherd</h3> 
        		<span class="datetime"><a title="Commentlink #35" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523524">March 31st, 2011 11:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Frederick,</p>
<p>I use these techniques every day on a site with millions of visitors 
each month. The magic ingredient is JavaScript, which helps older 
browsers pull their socks up :) It’s a shame that you feel you can’t use
 pseudo-classes because I think they’re very useful, and I’ve never run 
into any problems.</p>
<p>Richard</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523524#respond" onclick='return addComment.moveForm("comment-523524", "523524", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523524-down" style="opacity: 0.3;" title="Vote down! (2 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523524-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-3 clearfix ">
    <span class="commentnumber">36</span>
    <div class="comment" id="comment-524148">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/0ea26a9aac808e37dda12a9015c5bb5c.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Frederick</h3> 
        		<span class="datetime"><a title="Commentlink #36" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524148">April 4th, 2011 5:20 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>My point still stands, even if people vote my post down.  
CSS3/HTML5 stuff is great but it’s even harder now to guarantee a client
 how a website is going to behave than in the dreaded IE6 era.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524148#respond" onclick='return addComment.moveForm("comment-524148", "524148", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-524148-down" style="opacity: 0.3;" title="Vote down! (1 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524148-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">37</span>
    <div class="comment" id="comment-523447">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/bebf80c6817339d6daad34b1c1fa1a22.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Luca</h3> 
        		<span class="datetime"><a title="Commentlink #37" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523447">March 31st, 2011 5:57 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article<br>
I particularly wanted to see live demos but overall it was an excellent writing.<br>
Thank you</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523447#respond" onclick='return addComment.moveForm("comment-523447", "523447", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523447-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523447-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">38</span>
    <div class="comment" id="comment-523459">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/497f7fa43523f769b0b26385e9c835da.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sebastian Green</h3> 
        		<span class="datetime"><a title="Commentlink #38" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523459">March 31st, 2011 7:07 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great artical. Read up on all this stuff ages ago but not used it, causing me to forget it. </p>
<p>I will be nice not to have to use jQuery to do alternate table row colors.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523459#respond" onclick='return addComment.moveForm("comment-523459", "523459", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523459-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523459-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">39</span>
    <div class="comment" id="comment-523637">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/22d06c979ce8d9a46e9a67cebbd8497d.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Jauhari</h3> 
        		<span class="datetime"><a title="Commentlink #39" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523637">April 1st, 2011 12:30 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Awesome tutorial…. Must Bookmarked</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523637#respond" onclick='return addComment.moveForm("comment-523637", "523637", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523637-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523637-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">40</span>
    <div class="comment" id="comment-523645">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/34d1e05551a56ba9a37071ed45a4e709.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">DeN</h3> 
        		<span class="datetime"><a title="Commentlink #40" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523645">April 1st, 2011 1:03 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article, thanks for sharing all this technics.<br>
There is a small mistake(mistype) I think. At the section “4. Negation 
Pseudo-Class”, where you wrote about “input:not([type=submit]) { … } and
 input:not(disabled) { … }”, you wrote : “The second selects all input 
elements that are not enabled;”. But it selects all input elements thare
 not disabled, am I right?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523645#respond" onclick='return addComment.moveForm("comment-523645", "523645", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523645-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523645-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">41</span>
    <div class="comment" id="comment-523667">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/3fb737f436109bb74d0d285a155804de.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Vancouver photographer</h3> 
        		<span class="datetime"><a title="Commentlink #41" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523667">April 1st, 2011 2:58 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Fantastic post! Definitely going to give the tip about using
 the a element linking a whole selection a try. As well as the ‘only’ 
type. Thanks so much for the detail and clarity!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523667#respond" onclick='return addComment.moveForm("comment-523667", "523667", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523667-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523667-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">42</span>
    <div class="comment" id="comment-523669">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/b9658a36e1388efbf38327a394e65509.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sonu</h3> 
        		<span class="datetime"><a title="Commentlink #42" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523669">April 1st, 2011 3:20 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>When the hell is microsoft going to eat there shit 
completely  duh and what about ie9 is not working on xp lolx more than 
windows 7 uses xp now what ????????</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523669#respond" onclick='return addComment.moveForm("comment-523669", "523669", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-523669-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523669-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">43</span>
    <div class="comment" id="comment-523681">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/5ad2448ee6a6c1267feb42f0c945646e.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Hetal Sindhwad</h3> 
        		<span class="datetime"><a title="Commentlink #43" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523681">April 1st, 2011 4:21 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Nice tutorial….such a brainstorming of school algebra…..I 
would like to know one thing above u have mentioned that unlike array in
 css first value of “n” is “1″ and not “0″, but later in examples shown u
 have put “0″ as first value of “n”…reallly cant get on this cud u just 
clarify…thanks</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523681#respond" onclick='return addComment.moveForm("comment-523681", "523681", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-523681-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523681-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">44</span>
    <div class="comment" id="comment-523845">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/16c9a75b5fa2b84b4769f0f6923c1b84.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Martin</h3> 
        		<span class="datetime"><a title="Commentlink #44" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523845">April 2nd, 2011 2:42 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I dont have the motivation to learn css3 because IE dont 
support it, whats the point  I hate having to correct code for cross 
browser at the moment with css2. someone tell me how to get the 
motivation, i havent even read this article.</p>
<p>Sorry guys</p>
<p>Martin</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=523845#respond" onclick='return addComment.moveForm("comment-523845", "523845", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult negative">-2</div>
        		<a class="ratebtn down_active" id="btn-523845-down" style="opacity: 0.3;" title="Vote down! (4 votes)"></a>
        		<a class="ratebtn up_active" id="btn-523845-up" style="opacity: 0.3;" title="Vote up! (2 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">45</span>
    <div class="comment" id="comment-524073">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/293cec4e356b34ed51fbf2de251c9056.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Lee Agosila</h3> 
        		<span class="datetime"><a title="Commentlink #45" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524073">April 3rd, 2011 5:29 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>thanks for this Smashing Magz!! =)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524073#respond" onclick='return addComment.moveForm("comment-524073", "524073", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-524073-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524073-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">46</span>
    <div class="comment" id="comment-524114">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/a0d4f01cd414285786109f05f5e15fa4.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Daniel Matei</h3> 
        		<span class="datetime"><a title="Commentlink #46" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524114">April 4th, 2011 12:23 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article! Thanks for doing this!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524114#respond" onclick='return addComment.moveForm("comment-524114", "524114", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524114-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524114-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">47</span>
    <div class="comment" id="comment-524187">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/1740f1652d3096705ef08a0a3c0fe78f.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Dan</h3> 
        		<span class="datetime"><a title="Commentlink #47" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524187">April 4th, 2011 11:23 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Question: This may be a small thing, I’m new to CSS3… I 
understand these as “:root” and “:nth-last-child(n)” but what what are 
“E:root” and “E:nth-last-child(n)” does the the “E” stand for “Example”?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524187#respond" onclick='return addComment.moveForm("comment-524187", "524187", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524187-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524187-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">48</span>
    <div class="comment" id="comment-524218">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/83310954f2196b8691292690db88d1be.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Hlusta</h3> 
        		<span class="datetime"><a title="Commentlink #48" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524218">April 4th, 2011 2:54 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>E stands for element, I suppose.<br>
Tomas</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524218#respond" onclick='return addComment.moveForm("comment-524218", "524218", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-524218-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524218-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber">49</span>
    <div class="comment" id="comment-524259">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/9b3ba2f6b473c9516602137e3aa89981.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">du lich</h3> 
        		<span class="datetime"><a title="Commentlink #49" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524259">April 4th, 2011 10:48 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>oh ! thank you ! :)<br>
dulichsenvang.vn/</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524259#respond" onclick='return addComment.moveForm("comment-524259", "524259", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524259-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524259-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">50</span>
    <div class="comment" id="comment-524258">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f1debb2be8be2812d1c42991cab2f4e4.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">JD</h3> 
        		<span class="datetime"><a title="Commentlink #50" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524258">April 4th, 2011 10:17 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Crap. Another bad release from an evil company… Die, Internet Explorer, die!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524258#respond" onclick='return addComment.moveForm("comment-524258", "524258", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult negative">-2</div>
        		<a class="ratebtn down_active" id="btn-524258-down" style="opacity: 0.3;" title="Vote down! (2 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524258-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">51</span>
    <div class="comment" id="comment-524260">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/4c4a1be783ecc0676b3027a76b3eb387.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Prabaharan</h3> 
        		<span class="datetime"><a title="Commentlink #51" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524260">April 4th, 2011 10:53 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great Post!! Keep on posting…..</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524260#respond" onclick='return addComment.moveForm("comment-524260", "524260", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-524260-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524260-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">52</span>
    <div class="comment" id="comment-524530">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/287127786171f3be0934caf345631222.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">wotaewer</h3> 
        		<span class="datetime"><a title="Commentlink #52" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524530">April 6th, 2011 8:52 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>great stuff – I will definitely check a lot of those out on my next frontend design project.</p>
<p>Is there a jquery plugin that supports all of those css3 pseudo-elements for ie8 an below?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524530#respond" onclick='return addComment.moveForm("comment-524530", "524530", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524530-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524530-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">53</span>
    <div class="comment" id="comment-524749">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f387e1f4a4e44416dd30b1dd4410b4f0.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Petr Stojan</h3> 
        		<span class="datetime"><a title="Commentlink #53" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524749">April 7th, 2011 9:34 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article – I came to bed  at 5 AM. 5 coffees today.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524749#respond" onclick='return addComment.moveForm("comment-524749", "524749", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524749-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524749-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">54</span>
    <div class="comment" id="comment-524900">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/05ab245e89fcee320b7d2bbf0182ef1d.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Kashif M Qasim</h3> 
        		<span class="datetime"><a title="Commentlink #54" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524900">April 8th, 2011 2:44 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article Richard! Keep them coming.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524900#respond" onclick='return addComment.moveForm("comment-524900", "524900", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524900-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524900-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">55</span>
    <div class="comment" id="comment-524972">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/fa41d8fbd0879cee11da11ade94580b2.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Capi Etheriel</h3> 
        		<span class="datetime"><a title="Commentlink #55" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524972">April 8th, 2011 10:39 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>In your example, you say you use the following code:<br>
form:nth-child(-n+3) label { display: none; }<br>
But this will actually pick the three first  elements and and look for 
their labels. If you want to select the three first children of the 
form, you need to add a space there:<br>
form :nth-child(-n+3) label { display: none; }</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=524972#respond" onclick='return addComment.moveForm("comment-524972", "524972", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-524972-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-524972-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">56</span>
    <div class="comment" id="comment-525335">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/365a2be9791bda865c59ddd8a6a4acff.jpg" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Alexander Filatov</h3> 
        		<span class="datetime"><a title="Commentlink #56" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-525335">April 10th, 2011 11:37 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>A very interesting article! Definitely bookmarked under “useful”! Thank you.</p>
<p>I think the main question you have to ask yourself is what is your 
target audience? If you want to target the latest and greatest – use the
 pseudo-classes and something like Selectivizr for “almost” latest and 
greatest, while making sure that the users of older browsers know why 
their page is messed up and that they should upgrade.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=525335#respond" onclick='return addComment.moveForm("comment-525335", "525335", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-525335-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-525335-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">57</span>
    <div class="comment" id="comment-525613">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/e5ccaadec51be2e111a0c93f0a0ca7be.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Danilo Ramos</h3> 
        		<span class="datetime"><a title="Commentlink #57" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-525613">April 12th, 2011 5:52 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>The pseudo class :target don’t work in Internet Explorer AAAAAAArgh !</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=525613#respond" onclick='return addComment.moveForm("comment-525613", "525613", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-525613-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-525613-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">58</span>
    <div class="comment" id="comment-525648">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/c1a2a9ae6e4786f2169890aac6114780.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">mhadi oedram</h3> 
        		<span class="datetime"><a title="Commentlink #58" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-525648">April 12th, 2011 8:12 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I wish there was a browser compatibility chart for this article</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=525648#respond" onclick='return addComment.moveForm("comment-525648", "525648", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-525648-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-525648-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">59</span>
    <div class="comment" id="comment-526140">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/12b062ae0ae7765ee82722aea3e38eb6.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">geirge gershen</h3> 
        		<span class="datetime"><a title="Commentlink #59" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-526140">April 14th, 2011 7:31 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>No async on the GA tracker?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=526140#respond" onclick='return addComment.moveForm("comment-526140", "526140", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-526140-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-526140-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">60</span>
    <div class="comment" id="comment-527072">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/9407de63dee0ac8d0708fedb1f8b10a5.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">James</h3> 
        		<span class="datetime"><a title="Commentlink #60" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-527072">April 20th, 2011 7:16 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>“we can hope to see IE9 as the dominant Windows browser in the near future”</p>
<p>Doubt it, not while XP remains the dominant Windows OS version.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=527072#respond" onclick='return addComment.moveForm("comment-527072", "527072", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-527072-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-527072-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">61</span>
    <div class="comment" id="comment-528604">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/c1d9ebad1c8978c7e2771c572aa615e4.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">blind</h3> 
        		<span class="datetime"><a title="Commentlink #61" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-528604">April 26th, 2011 10:55 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Why did you put block elements [div, h1, h2, p] in inline element a?<br>
Was that for semantic code?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=528604#respond" onclick='return addComment.moveForm("comment-528604", "528604", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-528604-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-528604-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">62</span>
    <div class="comment" id="comment-549241">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/01be7364ea43f2e7e90954851435f264.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tom</h3> 
        		<span class="datetime"><a title="Commentlink #62" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-549241">September 26th, 2011 6:15 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Note that it is an W3C Proposed Recommendation  and until it
 is in the final version it is not an ideal solution to use them. Even 
more if you want to build an website that complies to the WCAG 
guidelines</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=549241#respond" onclick='return addComment.moveForm("comment-549241", "549241", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult positive">+1</div>
        		<a class="ratebtn down_active" id="btn-549241-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-549241-up" style="opacity: 0.3;" title="Vote up! (1 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">63</span>
    <div class="comment" id="comment-939574">
        <div class="comment-author">
		<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/d3fa298929e0f13204d4e767d74fe000.png" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">CiNiTriQs</h3> 
        		<span class="datetime"><a title="Commentlink #63" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-939574">May 16th, 2013 1:30 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Still an amazing read, thanks!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/?replytocom=939574#respond" onclick='return addComment.moveForm("comment-939574", "939574", "respond", "93190")'>Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		<div class="rateresult">0</div>
        		<a class="ratebtn down_active" id="btn-939574-down" style="opacity: 0.3;" title="Vote down! (0 votes)"></a>
        		<a class="ratebtn up_active" id="btn-939574-up" style="opacity: 0.3;" title="Vote up! (0 votes)"></a>
        	</div>
        	        </div>
    </div>
            </li>
        </ol>
                        </div>
		    <div style="display: none;" id="best-comments">
			<ol id="ratedcomments-overview" class="commentlist">
					<li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">1</span>
			<div class="comment" id="bestcomment-523236">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/62ac69747c262a7323834513593f095f.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">gorlok</h3> 
					<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523236">March 30th, 2011 3:43 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Why MS don’t push IE9 on Windows XP? Why?? :-(</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+6</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">2</span>
			<div class="comment" id="bestcomment-523242">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/7438e24e40d16589fd11a5b4b360c4d6.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Michael Ward</h3> 
					<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523242">March 30th, 2011 4:08 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>The :last-child pseduo-selector was originally omitted from css2 
because of performance considerations. It’s easy for a browser to know 
if an element is the first child as soon as it comes across it – there’s
 little to no performance penalty – but the browser has to loop back on 
itself when it gets to the last child. This will probably change the 
formatting of the element and force a full reflow of the doucment. 
That’s expensive CPU wise.</p>
<p>Of course, this seems a little silly now – but back when css 2 was 
being drafted these performance considerations were very real. Even 
today, we should be careful about the use of dynamic selectors if we 
care about performance.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+5</div>
					</div>
											</div>
		</div>
				</li><li class="comment byuser comment-author-richard-shepherd bypostauthor odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">3</span>
			<div class="comment" id="bestcomment-523522">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Richard Shepherd</h3> 
					<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523522">March 31st, 2011 11:02 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Really interesting thoughts, Michel. Thanks for sharing.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">4</span>
			<div class="comment" id="bestcomment-523284">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f92ac93206dae099180e09eaad1b408a.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Chris Nager</h3> 
					<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523284">March 30th, 2011 8:44 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Outstanding article! I am intrigued by the :not, :empty and 
:target pseudo-classes. I can see many of these being extremely helpful.
 You outlined each new pseudo-class perfectly and explained them with 
great examples. #smftw</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">5</span>
			<div class="comment" id="bestcomment-523253">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/afe4b735d07a4eadf2b692ff1cd1170c.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">John Flickinger</h3> 
					<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523253">March 30th, 2011 5:20 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>With the background color example, what is the difference between targeting the body tag and targeting the html tag?</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment byuser comment-author-richard-shepherd bypostauthor even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">6</span>
			<div class="comment" id="bestcomment-523254">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Richard Shepherd</h3> 
					<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523254">March 30th, 2011 5:20 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Hey Michael,</p>
<p>You make a really good point about speed. Lots of pseudo-selectors 
can affect performance, although I’ve yet to see a page that has 
suffered a great deal from this.</p>
<p>Richard</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">7</span>
			<div class="comment" id="bestcomment-523252">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/afe4b735d07a4eadf2b692ff1cd1170c.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">John Flickinger</h3> 
					<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523252">March 30th, 2011 5:19 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Another possible reason is that IE9 uses hardware acceleration 
for rendering which probably hooks into the OS. Versions of Vista before
 SP2 don’t support IE9 either.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">8</span>
			<div class="comment" id="bestcomment-523238">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/8356de6b9c6fb4542e7a95bf041e53a9.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">dsri</h3> 
					<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523238">March 30th, 2011 3:52 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great example for Pseudo class really awesome.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">9</span>
			<div class="comment" id="bestcomment-523715">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/46df155b770c796079dd93402b59e1bf.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Tom</h3> 
					<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523715">April 1st, 2011 7:21 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>But Firefox 4 also use hardware acceleration on Win XP. And maybe
 I’m wrong, but I think I read, that Firefox uses the same interfaces, 
that IE9 could use on XP.</p>
<p>So in this case I think it’s more a political decision than a technical one.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">10</span>
			<div class="comment" id="bestcomment-524995">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/f92ac93206dae099180e09eaad1b408a.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Chris Nager</h3> 
					<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524995">April 8th, 2011 1:30 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>ul:hover li:not(:hover) { opacity: .1; }<br>
<a href="http://chrisnager.com/playground/zodiac/" rel="nofollow">http://chrisnager.com/playground/zodiac/</a></p>
<p>I used the “:not ” pseudo-class and absolutely love it!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">11</span>
			<div class="comment" id="bestcomment-523285">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/dd09965da546e9b1eece44bf170f096f.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Zach Hilbrich</h3> 
					<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523285">March 30th, 2011 8:46 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>This was an amazing article im a new to all this 
CSS/Javascript/HTML, but man it is exciting to learn about. I hope i can
 apply this to some of the stuff im trying to put together myself.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">12</span>
			<div class="comment" id="bestcomment-524148">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/0ea26a9aac808e37dda12a9015c5bb5c.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Frederick</h3> 
					<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524148">April 4th, 2011 5:20 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>My point still stands, even if people vote my post down.  
CSS3/HTML5 stuff is great but it’s even harder now to guarantee a client
 how a website is going to behave than in the dreaded IE6 era.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">13</span>
			<div class="comment" id="bestcomment-523251">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/163dd74065e9e42c14f9edf7d4c68efb.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">kayin</h3> 
					<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523251">March 30th, 2011 4:54 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>’cause mainstream support for XP was ended a year ago.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">14</span>
			<div class="comment" id="bestcomment-523237">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/e0ac2f5ea3a162020f279d17acfb1bfd.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Edson</h3> 
					<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523237">March 30th, 2011 3:49 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>One of the best articles I’ve read! I’ll keep it as a quick reference guide for my projects from now on. Tks for share!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">15</span>
			<div class="comment" id="bestcomment-523669">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/b9658a36e1388efbf38327a394e65509.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Sonu</h3> 
					<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523669">April 1st, 2011 3:20 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>When the hell is microsoft going to eat there shit completely  
duh and what about ie9 is not working on xp lolx more than windows 7 
uses xp now what ????????</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">16</span>
			<div class="comment" id="bestcomment-524218">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/83310954f2196b8691292690db88d1be.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Hlusta</h3> 
					<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524218">April 4th, 2011 2:54 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>E stands for element, I suppose.<br>
Tomas</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">17</span>
			<div class="comment" id="bestcomment-524260">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/4c4a1be783ecc0676b3027a76b3eb387.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Prabaharan</h3> 
					<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524260">April 4th, 2011 10:53 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great Post!! Keep on posting…..</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">18</span>
			<div class="comment" id="bestcomment-524073">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/293cec4e356b34ed51fbf2de251c9056.jpg" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Lee Agosila</h3> 
					<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-524073">April 3rd, 2011 5:29 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>thanks for this Smashing Magz!! =)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">19</span>
			<div class="comment" id="bestcomment-549241">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/01be7364ea43f2e7e90954851435f264.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Tom</h3> 
					<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-549241">September 26th, 2011 6:15 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Note that it is an W3C Proposed Recommendation  and until it is 
in the final version it is not an ideal solution to use them. Even more 
if you want to build an website that complies to the WCAG guidelines</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">20</span>
			<div class="comment" id="bestcomment-523222">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/b84768256931bf83eec5429d2f5e5e39.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">ev4n</h3> 
					<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523222">March 30th, 2011 2:42 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great article, knew most of this already but its a great list with good examples.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">21</span>
			<div class="comment" id="bestcomment-523459">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/497f7fa43523f769b0b26385e9c835da.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Sebastian Green</h3> 
					<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523459">March 31st, 2011 7:07 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great artical. Read up on all this stuff ages ago but not used it, causing me to forget it. </p>
<p>I will be nice not to have to use jQuery to do alternate table row colors.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">22</span>
			<div class="comment" id="bestcomment-523440">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/0ea26a9aac808e37dda12a9015c5bb5c.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Frederick</h3> 
					<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523440">March 31st, 2011 5:42 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>My major gripe with a lot of this CSS3 stuff is if we’re STILL 
dealing with IE6 (so much to the point where Microsoft itself is running
 a website to celebrate the Death of IE6) how long are we going to be 
stuck with IE7 and IE8.  I purposely fire up IE8 whenever I see an 
HTML5/CSS3 demo just so I can ground myself and know that I can’t use 
any of these techniques.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">23</span>
			<div class="comment" id="bestcomment-523427">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/cb023a8d91aa3f440dd0265080504adc.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Rajiv</h3> 
					<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523427">March 31st, 2011 4:41 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>What about the :before and :after pseudo classes ??…<br>
Why u left out on these?<br>
These are very tricky and important… I want to know more about them..!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment byuser comment-author-richard-shepherd bypostauthor even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">24</span>
			<div class="comment" id="bestcomment-523432">
			<div class="comment-author">
				<img alt="" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ee87c6d0fc9130bf15449c6dc50a1962_002.png" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Richard Shepherd</h3> 
					<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#comment-523432">March 31st, 2011 5:02 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Hey Rajiv,</p>
<p>You’re right, :before and :after are both important and useful! 
However, in this article I’ve focused on CSS3 pseudo-classes, and 
:before and :after are pseudo-elements from the CSS2 spec.</p>
<p>You can read more about them over at <a href="http://www.w3.org/TR/CSS21/generate.html" rel="nofollow">http://www.w3.org/TR/CSS21/generate.html</a></p>
<p>Hope that helps!<br>
Richard</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
					</li></ol>
				    </div>
	</div>


<div id="respond">

    <h3>Leave a Comment</h3>

    <p class="desc">Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and <code>rel="nofollow"</code>
 is in use. So, please do not use a spammy keyword or a domain as your 
name, or it will be deleted. Let's have a personal and meaningful 
conversation instead. Thanks for dropping by!</p>

        
        
<a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#respond" style="display: none;">Click here to cancel reply.</a>								<div id="respond">
				<h3 id="reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/#respond" style="display: none;">Click here to cancel reply.</a></small></h3>
									<form action="http://coding.smashingmagazine.com/wp-comments-post.php" method="post" id="commentform">
																										<div class="clearfix"><p class="input-half"><label for="comment_author">Your name<span class="required">*</span></label><input name="author" id="comment_author" tabindex="1" class="input" type="text"></p>
<p class="input-half"><label for="email">Your email<span class="required">*</span></label><input name="email" id="email" tabindex="2" class="input" type="text"></p></div>
<input name="38cebawebsite" id="38cebawebsite" class="_hidden hide" type="text">
												<div id="message-box"><div class="cancel-comment-reply right"><small></small></div><label for="comment">Your message<span class="required">*</span></label><textarea name="comment" id="comment" rows="10" tabindex="4" class="input textarea"></textarea></div>												<p class="form-submit">
							<input name="submit" id="submit" value="Submit Comment" type="submit">
							<input name="comment_post_ID" value="93190" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
						</p>
						<p style="display: none;"><input id="akismet_comment_nonce" name="akismet_comment_nonce" value="774963edc6" type="hidden"></p>					</form>
							</div><!-- #respond -->
						
        </div>

					</div><!-- .col.main -->								
				</div><!-- .grid -->
				<p><a href="#top" class="backtotop" title="Jump to the top of the page">↑ Back to top</a></p>
			</div><!-- .fluid -->
		</div><!-- #container -->
			<div id="wpsidebar">
		<div class="col side">
			<div class="sm-search wp-search-form">			
				<form method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
					<label for="magazine-search">Search on Smashing Magazine</label>
					<input id="magazine-search" name="q" placeholder="e.g. Responsive design" type="text">
					<button class="search_submit" type="submit"><span class="first-type">Search</span><span class="last-type">Go!</span></button>
					<input name="cx" value="partner-pub-6779860845561969:5884617103" type="hidden">
					<input name="cof" value="FORID:10" type="hidden">
					<input name="ie" value="UTF-8" type="hidden">
				</form>
			</div>
			<div class="ed spnsrlistwrapper">
					  			<span class="declare">Advertisement</span>
	  			<span class="awithus"><a href="mailto:advertising@smashingmagazine.com" title="Advertise with us!" class="sprite ed-us">Advertise with us!</a></span>
								<div id="spnsrlisttarget"><ul id="spnsrlist" class="bnnr-list"><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5903__zoneid=24__OXLCA=1__cb=65ec31819e__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html'" href="http://www.zoho.com/projects/lp/project-management-and-collaboration.html" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_005.png" alt="Online Project Management" title="Online Project Management" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5903__zoneid=24__OXLCA=1__cb=65ec31819e__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html'" href="http://www.zoho.com/projects/lp/project-management-and-collaboration.html" target="_blank">Online Project Management</a><div id="beacon_65ec31819e" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_013.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=a9f913bf4a__oadest=http%3A%2F%2Fpsd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h'" href="http://psd2html.com/?utm_source=smashingmagazine.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_003.png" alt="PSD2HTML.com" title="PSD2HTML.com" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=a9f913bf4a__oadest=http%3A%2F%2Fpsd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h'" href="http://psd2html.com/?utm_source=smashingmagazine.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" target="_blank">PSD2HTML.com</a><div id="beacon_a9f913bf4a" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_010.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=7975a23084__oadest=http%3A%2F%2Fw3-markup.com'" href="http://w3-markup.com/" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai.jpg" alt="PSD to HTML" title="PSD to HTML" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=7975a23084__oadest=http%3A%2F%2Fw3-markup.com'" href="http://w3-markup.com/" target="_blank">PSD to HTML</a><div id="beacon_7975a23084" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_003.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5894__zoneid=24__OXLCA=1__cb=e11224ec67__oadest=http%3A%2F%2Fwww.vectorstock.com%2Ffree-vectors%3FSM%3D1'" href="http://www.vectorstock.com/free-vectors?SM=1" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_003.gif" alt="Free + Royalty Free Vector Art" title="Free + Royalty Free Vector Art" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5894__zoneid=24__OXLCA=1__cb=e11224ec67__oadest=http%3A%2F%2Fwww.vectorstock.com%2Ffree-vectors%3FSM%3D1'" href="http://www.vectorstock.com/free-vectors?SM=1" target="_blank">Free + Royalty Free Vector Art</a><div id="beacon_e11224ec67" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=c5cbb69e8d__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral'" href="http://www.typekit.com/?utm_source=smashingmagazine&amp;utm_medium=Display&amp;utm_content=shwf120515&amp;utm_campaign=General" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai.png" alt="Web fonts with Typekit" title="Web fonts with Typekit" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=c5cbb69e8d__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral'" href="http://www.typekit.com/?utm_source=smashingmagazine&amp;utm_medium=Display&amp;utm_content=shwf120515&amp;utm_campaign=General" target="_blank">Web fonts with Typekit</a><div id="beacon_c5cbb69e8d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_009.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=dcb0d989b5__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm'" href="http://www.dreamtemplate.com/?ref=sm" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_002.gif" alt="Premium Web Templates" title="Premium Web Templates" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=dcb0d989b5__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm'" href="http://www.dreamtemplate.com/?ref=sm" target="_blank">Premium Web Templates</a><div id="beacon_dcb0d989b5" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_012.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=9becc8bb8f__oadest=http%3A%2F%2Fwww.zoomyimages.com'" href="http://www.zoomyimages.com/" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_004.jpg" alt="Quality Stock Images &amp; Music" title="Quality Stock Images &amp; Music" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=9becc8bb8f__oadest=http%3A%2F%2Fwww.zoomyimages.com'" href="http://www.zoomyimages.com/" target="_blank">Quality Stock Images &amp; Music</a><div id="beacon_9becc8bb8f" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_011.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5945__zoneid=24__OXLCA=1__cb=90b1b0b460__oadest=http%3A%2F%2Fwww.lightcms.com%2Ffor-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DHTML-Green%26utm_campaign%3DSmashing'" href="http://www.lightcms.com/for-designers?utm_source=Smashing%2B%28Sponsor%29&amp;utm_medium=banner&amp;utm_content=HTML-Green&amp;utm_campaign=Smashing" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_007.png" alt="Sign Up for Free!" title="Sign Up for Free!" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5945__zoneid=24__OXLCA=1__cb=90b1b0b460__oadest=http%3A%2F%2Fwww.lightcms.com%2Ffor-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DHTML-Green%26utm_campaign%3DSmashing'" href="http://www.lightcms.com/for-designers?utm_source=Smashing%2B%28Sponsor%29&amp;utm_medium=banner&amp;utm_content=HTML-Green&amp;utm_campaign=Smashing" target="_blank">Sign Up for Free!</a><div id="beacon_90b1b0b460" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_016.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5618__zoneid=24__OXLCA=1__cb=931cfefe3c__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag'" href="http://www.stickermule.com/?utm_campaign=Smashing_Branded&amp;utm_medium=Banner&amp;utm_source=Smashing_Mag" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_004.png" alt="Custom Stickers" title="Custom Stickers" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5618__zoneid=24__OXLCA=1__cb=931cfefe3c__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag'" href="http://www.stickermule.com/?utm_campaign=Smashing_Branded&amp;utm_medium=Banner&amp;utm_source=Smashing_Mag" target="_blank">Custom Stickers</a><div id="beacon_931cfefe3c" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_004.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5736__zoneid=24__OXLCA=1__cb=cb37a78ebb__oadest=http%3A%2F%2Fwww.sitefinity.com%2Fcampaigns%2Fwhitepapers%2Fthree-steps-to-a-better-mobile-strategy%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmmag_mobilewhitepaper'" href="http://www.sitefinity.com/campaigns/whitepapers/three-steps-to-a-better-mobile-strategy?utm_source=smashing-magazine&amp;utm_medium=banner&amp;utm_campaign=smmag_mobilewhitepaper" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_003.jpg" alt="Web Content Management." title="Web Content Management." border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5736__zoneid=24__OXLCA=1__cb=cb37a78ebb__oadest=http%3A%2F%2Fwww.sitefinity.com%2Fcampaigns%2Fwhitepapers%2Fthree-steps-to-a-better-mobile-strategy%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmmag_mobilewhitepaper'" href="http://www.sitefinity.com/campaigns/whitepapers/three-steps-to-a-better-mobile-strategy?utm_source=smashing-magazine&amp;utm_medium=banner&amp;utm_campaign=smmag_mobilewhitepaper" target="_blank">Web Content Management.</a><div id="beacon_cb37a78ebb" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_019.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5897__zoneid=24__OXLCA=1__cb=d22fc42755__oadest=http%3A%2F%2Fwww.senchacon.com%2F%3Futm_source%3Dwebsite%26utm_medium%3Dsmash%26utm_campaign%3Dsenchacon2013'" href="http://www.senchacon.com/?utm_source=website&amp;utm_medium=smash&amp;utm_campaign=senchacon2013" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_009.png" alt="Ultimate HTML5 App Dev Event" title="Ultimate HTML5 App Dev Event" border="0"></a><br><a onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5897__zoneid=24__OXLCA=1__cb=d22fc42755__oadest=http%3A%2F%2Fwww.senchacon.com%2F%3Futm_source%3Dwebsite%26utm_medium%3Dsmash%26utm_campaign%3Dsenchacon2013'" href="http://www.senchacon.com/?utm_source=website&amp;utm_medium=smash&amp;utm_campaign=senchacon2013" target="_blank">Ultimate HTML5 App Dev Event</a><div id="beacon_d22fc42755" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_007.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/adServer.htm"></script><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/img.gif" style="position: absolute; left: 0px; top: 0px;"><script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/StdBanner.js"></script><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/e4e442ee-98b0-4eea-97e6-79fe9ca28e8c.jpg" id="ebStdBanner0" title="" onclick="gEbStdBanners[0].handleInteraction()" style="cursor: pointer;">
<noscript>
<a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5223__zoneid=24__OXLCA=1__cb=7bb8f06185__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080755%26Page%3D%26PluID%3D0%26Pos%3D777" target="_blank"><img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=6080755&Page=&PluID=0&Pos=777" border=0 width=200 height=125></a>
</noscript>
<br>
<a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5223__zoneid=24__OXLCA=1__cb=7bb8f06185__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080755%26Page%3D%26PluID%3D0%26Pos%3D777" target="_blank">Create free stunning sites!</a><div id="beacon_7bb8f06185" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_006.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=ecff82e977__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_002.png" alt="" title="" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=ecff82e977__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank">PSD to HTML5/CSS3</a><div id="beacon_ecff82e977" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_002.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5838__zoneid=24__OXLCA=1__cb=3747508ed9__oadest=http%3A%2F%2Fwww.jotform.com%2F%3Futm_source%3Dsmashing%26utm_medium%3Dbanner%26utm_content%3Dlogo%26utm_campaign%3Dsmashing" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_008.png" alt="Online Form Builder" title="Online Form Builder" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5838__zoneid=24__OXLCA=1__cb=3747508ed9__oadest=http%3A%2F%2Fwww.jotform.com%2F%3Futm_source%3Dsmashing%26utm_medium%3Dbanner%26utm_content%3Dlogo%26utm_campaign%3Dsmashing" target="_blank">Online Form Builder</a><div id="beacon_3747508ed9" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_015.gif" alt="" style="width: 0px; height: 0px;"></div>
</li><li class="double"><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5045__zoneid=77__OXLCA=1__cb=d979d4cee5__oadest=http%3A%2F%2Fad.au.doubleclick.net%2Fclk%3B268093556%3B92859839%3Bk" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_002.jpg" alt="" title="" border="0"></a><div id="beacon_d979d4cee5" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_008.gif" alt="" style="width: 0px; height: 0px;"></div>
</li></ul></div><!-- /#spnsrlisttarget -->
			</div><!-- /.ed.spnsrlistwrapper -->
			<div class="inner">
				<div class="sidebartabs">
                                	<div id="jobs" class="smashingwidget">
                                        	<h3><a style="border: medium none;" href="http://jobs.smashingmagazine.com/?pk_campaign=sm&amp;piwik_kwd=widget"><span>Smashing Job Board</span><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/sm-jobs.png" alt="Smashing Jobs"></a></h3>
                                        	<ul class="topiclist">
                                                	<li style="display: none;"></li>
                                                	<li class="clearfix"><a href="http://feedproxy.google.com/%7Er/smjobs/%7E3/sZMY3a9lLPk/2398994">UX Designer - ITX Corp - (Rochester, NY) - FullTime</a><p>Job
 Description We are currently accepting resumes for an experienced 
web/mobile designer, a design geek skilled in mobile and web design. The
 qualified candidate…</p></li><li class="clearfix"><a href="http://feedproxy.google.com/%7Er/smjobs/%7E3/jgpYM1NLUaQ/2398902">Graphic Designer - Loyola University Chicago - (Chicago, Illinois) - FullTime</a><p>Job
 Title: Graphic Designer Reports to: Art Director Division: University 
Marketing and Communication  Responsible for design of print and 
electronic…</p></li>                                        	</ul>
                                        	<p class="view-more"><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&amp;piwik_kwd=widget">View more job openings…</a></p>
                                	</div><!-- /#jobs -->
                        	</div><!-- /.sidebartabs -->	
				<div id="sidebarspecialtarget"><div id="sidebarspecial"><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5939__zoneid=72__OXLCA=1__cb=fcd8838e1d__oadest=http%3A%2F%2Fwww.lightcms.com%2F%3Futm_source%3DSmashing%252B%28420x200%29%26utm_medium%3Dbanner%26utm_content%3DSwitcher%26utm_campaign%3DSmashing" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_010.png" alt="" title="" border="0"></a><div id="beacon_fcd8838e1d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_018.gif" alt="" style="width: 0px; height: 0px;"></div>
</div></div><!-- /#sidebarspecialtarget -->
			</div><!-- /.inner -->
        		<div class="two clearfix">
            			<div class="left">	
                			<div class="ed sidebared">
                    				<div id="sidebaredtarget"><div id="sidebared"><!--<span class="declare">Advertisement</span>-->
<div style="height: 20px;"></div><a style="border: medium none;" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5938__zoneid=40__OXLCA=1__cb=ec5b34a84e__oadest=http%3A%2F%2Fwww.lightcms.com%2Ffor-designers%3Futm_source%3DSmashing%252B%28Sidebar%29%26utm_medium%3Dbanner%26utm_content%3DHTML-Green%26utm_campaign%3DSmashing" target="_blank"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/ai_006.png" alt="" title="" border="0"></a><div id="beacon_ec5b34a84e" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/lg_014.gif" alt="" style="width: 0px; height: 0px;"></div>
</div></div>
                			</div><!-- /.ed.sidebared -->
                			<div class="ed sidebared">
                    				<div id="sidebaredthreetarget"><div id="sidebaredthree"></div></div>
                			</div>
				</div><!-- /.left -->
            			<div class="right">
            			</div><!-- /.right -->
        		</div><!-- /.two -->
			
		</div><!-- .col.ads -->
	</div>
		<div id="footer">

            <div class="contribute">
            	<div class="product clearfix">
                    <div class="product-image">
                        <a style="border: medium none;" href="https://shop.smashingmagazine.com/the-smashing-book-4-print-ebooks.html?pk_campaign=smashingmagazine-footer"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/smashing-book-4-bundle.png" alt="Smashing Book #4"></a>
                    </div>

                    <div class="product-description">
                        <p><strong>The Smashing Book #4</strong><br>You can now pre-order the Smashing Book #4 in PDF, ePub and Kindle formats. <a href="https://shop.smashingmagazine.com/the-smashing-book-4-print-ebooks.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
                        <p class="buy-button"><a href="https://shop.smashingmagazine.com/checkout/cart/add?product=461?pk_campaign=smashingmagazine-footer">Buy</a></p>
                    </div>
            	</div>
            </div>
            <div class="contribute">
            	<div class="product clearfix">
                    <div class="product-image">
                    	<a style="border: medium none;" href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/smashing-library-subscription.png" alt="The Smashing Library"></a>
                    </div>

                    <div class="product-description">
                	    <p><strong>The Smashing Library</strong><br>Get access to all digital formats of published Smashing eBooks and printed books. <a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
                	    <p class="buy-button"><a href="https://shop.smashingmagazine.com/checkout/cart/add?product=411?pk_campaign=smashingmagazine-footer">Buy</a></p>
                    </div>
                </div>
            </div>
            <div class="contribute">
            	<div class="product clearfix">
                    <div class="product-image">
                    	<a style="border: medium none;" href="https://shop.smashingmagazine.com/smashing-workshop-css3-responsive-web-design.html?pk_campaign=smashingmagazine-footer"><img src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/andy-clarke-smashing-workshop.png" alt="Andy Clarke - Workshop: CSS3 for Responsive Design"></a>
                    </div>

                    <div class="product-description">
                        <p><strong>The Smashing Workshops</strong><br>Andy Clarke will be hosting a workshop in Freiburg on the 25th of June. <a href="https://shop.smashingmagazine.com/smashing-workshop-css3-responsive-web-design.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
                        <p class="buy-button"><a href="https://shop.smashingmagazine.com/checkout/cart/add?product=443?pk_campaign=smashingmagazine-footer">Buy</a></p>
                    </div>
            	</div>
            </div>

		    <p class="statement"><em>With a commitment to quality content for the design community.</em><br><a href="http://www.smashing-media.com/">Smashing Media</a> Made in Germany. 2006-2013. <a href="http://www.smashingmagazine.com/contact/">Contact Us</a> <a href="http://www.smashingmagazine.com/about/">Impressum</a></p>
		</div>
		<!-- Anfang Bannersammelstelle -->
<script type="text/javascript">/* <![CDATA[ */  ads_init();   /* ]]> */ </script>
<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/spcjs.js"></script><script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/spc.js"></script><script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/fl.js"></script>

	<script type="text/javascript">/* <![CDATA[ */  ads_display();   /* ]]> */ </script><div id="edpool"><div id="sidebaredtwo"></div></div><!-- /#edpool -->
<!-- Ende Bannersammelstelle -->
		    <script src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/js.js" type="text/javascript"></script>
    <script type="text/javascript">
        try{ clicky.init(66569468); }catch(e){}
    </script>
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName('script')[0];
a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/1125.js";
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>		<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/prism.js"></script>
		<script type="text/javascript" src="How%20To%20Use%20CSS3%20Pseudo-Classes%20_%20Smashing%20Coding_files/prism_002.js"></script>
	</body></html>